Формы в HTML5

Новые формы в языке HTML5

В HTML5 у элементов форм, появились дополнительные атрибуты и их значения. Задача новых форм HTML5 состоит в том чтобы облегчать создание скриптов или даже заменять собой типичные функции, которые ранее осуществимы были лишь при помощи скриптов.

Тег <form>

Новые атрибуты и их значения в теге form:
1. autocomplete="on/off" - включает/отключает автозаполнение у форм, если в браузере автозаполнение отключено, то атрибут не работает,
2. novalidate="novalidate" - отключает встроенную проверку данных, введённых пользователем в поля <input type="email" /> и <input type="url" />

Тег <input />

Новые атрибуты и их значения в теге input:
1. autocomplete="on/off" - включает/отключает автозаполнение у тега input, если в браузере автозаполнение отключено, то атрибут не работает,
2. autofocus="autofocus" - установка фокуса на элемент,
3. form="idName" - связывает тег input, с формой по атрибуту id="idName", при условии что тег input находится вне формы,
4. formaction="URL" - указывает на адрес программы которая будет обрабатывать данные введённые в тег input, аналогичен атрибуту action=" " у тега form,
5. formenctype=" " - указывает на способ кодировния данных при их отправки на сервер, аналогичен атрибуту enctype=" ", у тега form, имеет следующие значения:
application/x-www-form-urlencoded - не латинские символы кодируются их шестнадцатеричными кодами, пробелы заменяются знаком +, является значением по умолчанию,
multipart/form-data - данные не кодируются,
text/plain - данные не кодируются, но пробелы заменяются знаком +,
6. formmethod="get/post" - указывает каким методом отправить данные, post или get,
7. formnovalidate="formnovalidate" - отключает встроенную проверку данных, аналогичен атрибуту novalidate=" " у тега form
8. formtarget="имя окна/_blank/_self/_parent/_top" - указывет на окно в которое будет загружаться, результат обработки данных, аналогичен атрибуту target=" " у тега form
9. list="idName" - указывает на имя идетификатора id="idName" тега datalist, в котором находится список вариантов появляющиеся при вводе текста в поле,
10. max=" " - указывает на максимальное число, которое можно ввести в поле,
12. min=" " - указывает на минимальное число, которое можно ввести в поле,
13. multiple="multiple" - позволяет указать несколько e-mail адресов, в поле через запятую, или загрузить несколько файлов,
14. pattern=" " - указывает на регулярное выражение, исходя из которого принимается решение о верности или не верности введённых данных, атрибут предназначен для создания собственных полей ввода,
15. placeholder=" " - указывает на строку, которая находтся в текстовом поле, она исчезает когда пользователь начинает вводить данные,
16. readonly="readonly" - указывает на текстовое поле, в которое пользователь не может ввести данные,
17. required="required" - указывает на текстовое поле, которое обязательно должно быть заполненным, если пользователь попытается отправить данные не заполнив это поле, то браузер выдаст об этом сообщение ввиде всплывающей подсказки,
18. step=" " - указывает на шаг, при введении чисел.

Атрибут type=" "

У атрибута type=" " в языке HTML5, добавилось следующие значения:

1. type="color" - создаёт виджет выбора цвета,
2. type="date" - содаёт поле для ввода даты, при помощи виджета календаря (далее ВК),
3. type="datetime" - содаёт поле для ввода даты и времени (ВК),
4. type="datetime-local" - содаёт поле для ввода даты и местного времени (ВК),
5. type="email" - создаёт поле для ввода e-mail,
6. type="month" - создаёт поле для ввода месяца (ВК),
7. type="number" - создаёт поле для ввода числа,
8. type="range" - создаёт ползунок,
9. type="search" - создаёт поисковое поле,
10. type="tel" - создаёт поле для ввода телефонного номера,
11. type="time" - создаёт поле для ввода даты и времени (ВК), без часовоко пояса,
12. type="url" - создаёт поле для ввода url,
13. type="week" - создаёт поле для ввода недели (ВК).

Тег <keygen>

Теги <keygen> </keygen> используются для шифровки и расшифровки данных.

Тег <output>

Теги <output> </output> создают область для вывода работы скрипта.

Читать далее: Новые технологии HTML5