В этом видео мы продолжаем рассматривать встраиваемые элементы,
и я расскажу о том, как создаются формы в HTML-документе.
Итак, формы позволяют создавать разные части интерфейса,
обеспечивая взаимодействие с пользователем.
Большинство элементов форм создается при помощи элемента input.
По ссылке ниже можно перейти и прочитать больше информации об элементе input.
И так выглядит обычное текстовое поле в браузере.
Атрибут type у элемента input сообщает браузеру,
к какому типу элемент формы относится.
Например, у нас есть элемент input, ему можно задать тип формы password.
Это текстовое поле — при вводе символов символы заменяются на звездочки.
type text- это обычное текстовое поле.
В этом случае можно type не указывать,
и по умолчанию будет установлено именно текстовое поле.
Одно из первых появившихся элементов формы — это type file,
позволяющий загружать файл с компьютера на сервер.
Ну, стандартных элементов форм довольно
много — это различные кнопки, чекбоксы, но о них далее более подробно.
Вот так выглядит форма, которую я показывал раньше в коде,
то есть у нас есть два элемента формы — если мы начнем в первый вводить какие-то
данные, то все символы будут заменяться на звездочки.
Во втором случае что мы ввели с клавиатуры, то там и появляется.
И последний элементы формы — это загрузка файла.
Как правило, то, как выглядит элементы формы,
зависит от браузера и от того, какая операционная система используется.
Помимо обычных текстовых полей ввода также можно создавать списки,
в которых можно выбирать один элемент или несколько элементов.
Например, если мы укажем элементу формы type checkbox,
то в этом случае мы получим список элементов,
при клике на которые можно выбрать один или несколько элементов.
Если же у нас установлен type radio, то у нас создается группа радиокнопок,
то есть мы можем выбрать один элемент из этой группы.
Тут важно заметить, что все эти элементы объединяются в группы при помощи
атрибута name, то есть значение у всех элементов ставится одинаковое.
При помощи атрибута checked можно установить по умолчанию выбранные
элементы.
Например, в первом случае, где у нас type checkbox,
у нас по умолчанию выбран элемент «хлеб».
Во втором случае у нас выбран элемент «сок».
Ну и в браузере это выглядит вот так, то есть по умолчанию у нас отмечен первый
элемент, и во втором случае — второй элемент.
Если мы начнем менять значения, то есть понажимаем на разные кнопки,
то увидим, что checkbox у нас — можно выбрать сразу несколько элементов,
а в случае радиокнопок мы можем выбрать только один из списка.
В HTML5 появились новые элементы форм,
например такие как date, email, url, number.
Чаще всего они используются для удобства ввода с таких устройств,
как мобильные телефоны, планшеты.
Устройства по умолчанию поддерживают эти поля форм, добавляя дополнительные
символы, например для имейла добавляется знак «@»,
для url добавляется «.» и «/», и при вводе в поле
type number появляется клавиатура только лишь с числами.
Также можно указать минимальное и максимальное значения.
А элемент date позволяет намного проще
вводить какие-то данные, связанные с датами.
В некоторых браузерах появляется дополнительный календарь.
Если же эти поля форм не поддерживаются браузером, то это обычное текстовое поле.
Есть такие специфичные виды форм, как color и range.
В браузере это выглядит как-то вот так — я еще раз повторяюсь,
что то, как выглядит элемент формы, зависит от того,
какой это браузер и в какой операционной системе находится пользователь.
В данном случае это Chromium, и выглядит все вот так.
Элементам форм также можно задать вспомогательный текст,
который исчезает при наборе текста.
При помощи атрибута placeholder можно указать этот текст.
Например, у нас есть текстовое поле ввода type text,
и в качестве placeholder'а мы указываем то, что должно находиться в этом поле.
В браузере этот текст будет полупрозрачный, и,
как только мы начинаем что-то вводить, этот текст сразу же исчезает.
Атрибут disabled позволяет блокировать доступ к изменению элемента.
К примеру, у нас есть два элемента,
и в первом случае — это обычное текстовое поле, не заблокированное.
Во втором случае установлен атрибут disabled,
который блокирует изменения этого поля.
Но у второго элемента по умолчанию установлено значение, то
есть в атрибуте value задается значение, которое установлено по умолчанию.
И в браузере это выглядит вот так, то есть в первом случае мы можем изменять поле,
во втором случае установлено значение, но мы не можем изменить это значение.
Элемент select позволяет создать список.
Он создается при помощи элемента select,
внутри указывается список элементов при помощи тега option.
Значение указывается в качестве содержимого этого элемента.
Также можно при помощи атрибута value задать значение, но это значение,
возможно, будет использоваться каким-то скриптом,
то есть пользователь его никак не увидит.
А увидит пользователь то, что указано в качестве содержимого элемента.
Ну и можно установить выбранный элемент по умолчанию при помощи атрибута selected.
Вот так это выглядит в браузере: если мы нажмем на эту кнопку,
у нас появляется выпадающий список.
И по умолчанию уже выбран какой-то элемент.
Можно это значение изменить, кликнув по другому элементу из списка.
Атрибут multiple позволяет одновременно выбрать сразу несколько элементов.
Задается этот атрибут у родительского элемента selected.
Также можно указать количество строк при помощи атрибута size,
для того чтобы посмотреть этот список.
Если элементов больше, то появляется scroll, можно прокрутить и выбрать нужные.
В остальном все точно так же, как при одиночном выборе.
В браузере это выглядит вот так: то есть если мы нажимаем на каждый элемент списка,
он выбирается.
Для того чтобы выбрать несколько элементов, нажимаем на элемент,
зажимаем кнопку Ctrl, если это Windows, или Command, если это Mac OS,
и выбираем следующий элемент.
Элемент textarea представляет собой многострочную форму ввода текста.
При помощи атрибутов rows можно указать количество строк,
при помощи атрибута cols можно указать количество колонок.
Что значит колонок?
То есть сколько символов помещается в одной строке.
Ну и, соответственно, также можно указать атрибут placeholder.
Когда начинаем вводить текст, то этот текст исчезает.
У этого элемента значение устанавливается внутри содержимого,
то есть не в атрибуте value, а в самом содержимом.
Вот так это выглядит в браузере.
При помощи элемента button можно создать кнопку на странице.
Конечно, можно при помощи элемента input тоже создать кнопку, но подпись,
которая находится внутри кнопки, задается при помощи атрибута value,
что не позволяет вкладывать туда другие элементы.
Элемент button позволяет вкладывать в себя другие элементы,
потому что значение указывается в качестве содержимого элемента button.
Например, у нас есть button, мы пишем какой-то текст,
можем вставить туда картинку ну и на самом деле сколько угодно элементов.
По умолчанию значение атрибута type у элемента button установлено submit.
Его можно также поменять на button или reset.
Вот так это выглядит в браузере,
то есть когда у нас обычный текст и текст с картинкой,
то есть кнопка увеличилась в размере и туда добавился элемент картинки.
Элемент label позволяет установить связь между элементом
формы и каким-то текстовым элементов, например текстовым.
Есть два способа их связать.
Первый: мы указываем у элемента формы атрибут id и устанавливаем
какое-то значение, например check1.
У элемента label задаем атрибут, в котором устанавливаем то же самое значение,
что и в атрибуте id у элемента for — check1.
Второй способ заключается в том,
что мы внутрь элемента label вкладываем элемент input и рядышком пишем текст.
Вот так это выглядит в браузере, то есть никак вроде бы визуально не отличается.
Но если мы нажмем напротив checkbox'а на текст, то галочка поставится в checkbox'е,
то есть checkbox будет выбран.
Если мы нажмем на текст перед textarea — они тоже между собой связаны при помощи
id и атрибута for при клике, — то фокус установится на элемент формы textarea.
В этом видео вы узнали об основных элементах формы и как их создавать.
В следующем видео я расскажу о том,
как отправить данные с клиента на сервер без использования Javascript'а.
