0:00
В этом видео я расскажу вам про элемент form, и для чего он нужен.
Элемент form предназначен для обмена данными между пользователем и сервером.
Для того чтобы отправить эти данные,
можно воспользоваться кнопкой submit или нажать кнопку enter, находясь внутри form.
Например, есть какая-то форма, и внутри нее вложены некоторые элементы,
например, текстовое поле, например, поле для ввода email и какое-то скрытое поле,
которое пользователь не должен видеть, но там могут храниться какие-то данные.
Есть две кнопки — это submit и reset.
reset, соответственно, сбрасывает форму к первоначальному состоянию,
а submit отправляет данные с клиента на сервер.
Находясь в одном из полей, например,
name, можно нажать кнопку enter, и данные также отправятся.
При этом, если не указано никаких дополнительных атрибутов у элемента form,
то страница просто-напросто перезагрузится,
добавив в URL определенный набор параметров.
Эти параметры берутся, собственно, из каждого элемента формы.
В атрибуте name задается название, то есть имя отправляемых данных.
Например, name — это означает, что отправляется имя.
И в качестве значения передается то, что было введено в поле формы.
И соответственно берется из каждого поля ввода и
отправляется на сервер путем перезагрузки страницы.
Атрибут action у элемента формы указывает,
по какому адресу нужно отправить эти данные.
Если этот атрибут не задать, а в HTML5 можно его не задавать,
в этом случае просто-напросто страница перезагрузится,
подставив туда определенные параметры.
При помощи атрибута method можно сообщить серверу, какой тип запроса.
По умолчанию установлено значение get.
Это означает то, что передача данных происходит через адресную строку.
Как я показывал в примере ранее, после пути устанавливается
знак вопроса и передаются параметры, разделенные знаком амперсанд.
Есть некоторые ограничения в таком типе передачи
данных — это ограничения в размере, максимум четыре килобайта.
Но есть и свои плюсы.
Данный запрос можно сохранить, например,
в закладке браузера и при желании снова перейти на эту страницу,
где будут переданы уже все предыдущие параметры.
Вот такой вид
записи — то есть у нас берется название поля из атрибута name
и значение либо из атрибута value, либо то, что ввел пользователь.
Следующее значение — это значение post.
В этом случае данные передаются в запросе.
Его основное преимущество в том, что можно передавать большие куски данных,
но также можно передавать какие-нибудь секретные данные, например, пароль.
И ниже приведен код, где указан метод post,
и при нажатии на кнопку submit страница перезагрузится.
Я обращаю ваше внимание на то, что у элемента button не задан атрибут type,
потому что по умолчанию type установлен в submit.
В HTML5 появилась возможность проверки форм.
Для того чтобы проверить, что поле не является пустым, можно установить атрибут
required, и при попытке отправить данные на сервер браузер сообщит,
что это поле не должно быть пустым.
Для таких элементов формы,
как email и URL, есть встроенная проверка на валидность.
Например, для email обязательно должен присутствовать символ «собаки».
Для URL это должен быть протокол и еще некоторые знаки.
Также можно задать свой шаблон для проверки.
Например, у нас есть номер телефона, и он соответствует определенному шаблону.
Так вот, в атрибуте pattern можно создать этот шаблон.
Он представляет собой регулярные выражения.
Тут важно заметить, что если мы не укажем атрибут required,
то браузер позволит отправить форму, если она будет пустая.
То есть проверка не пройдет, если там ничего нет.
Поэтому если не хочется отправлять пустые данные, можно указать атрибут required.
Ну и в браузере это выглядит следующим образом: мы вводим
некоторые данные, например, как зовут, email.
Если мы в email ошиблись и нажали кнопку «отправить»,
то браузер нас оповестит всплывающим сообщением.
То же самое происходит в полем URL и соответственно с последним полем,
где нам нужно ввести номер телефона.
Если мы введем его не в соответствующем формате, то браузер нам об этом сообщит.
Атрибут tabindex позволяет установить порядок смены фокуса по элементам.
Что это значит?
При нажатии кнопки tab происходит перемещение фокуса по странице.
И как правило, он происходит сверху вниз, слева направо.
Но этот порядок можно поменять.
Я покажу на примере элементов формы.
У нас есть несколько кнопок, и нам нужно,
чтобы сначала при нажатии кнопки tab у нас выделялся первый элемент,
то есть устанавливался на него фокус, затем второй, третий, четвертый,
и они расположены в разных местах — некоторые выше, некоторые ниже.
И вот так это выглядит в браузере.
Нажимаю на кнопку tab, мы сначала перемещаемся на первый элемент, который
находится в середине, затем на второй, третий, четвертый, пятый, шестой, седьмой.
И в тот момент, когда у нас заканчиваются значения больше ноля,
происходит перемещение в самый верх, и проходится по тем элементам,
у которых не задан tabindex.
В этом видео вы узнали,
как можно при помощи элемента form отправить данные с клиента на сервер.
В следующем видео я расскажу о том,
какие средства есть в HTML для интернационализации.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
