Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Формы HTML5

formy-html5
Запись создана: 12 Июн 2015
Запись обновлена: 12 Июн 2015

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

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

Тег <form>

Новые атрибуты и их значения в теге form:

  • autocomplete="on/off" — включает/отключает автозаполнение у форм, если в браузере автозаполнение отключено, то атрибут не работает
  • novalidate="novalidate" — отключает встроенную проверку данных, введённых пользователем в поля <input type="email" /> и <input type="url" />

Тег <input />

Рассмотрим новые атрибуты HTML5 и их значения в теге input:

autocomplete="on/off" — включает/отключает автозаполнение у тега input, если в браузере автозаполнение отключено, то атрибут работать не будет.

autofocus="autofocus" — установка фокуса на элемент.

form="idNameForm" — связывает тег input, с формой по его атрибуту id, при условии что тег input, находится вне формы.

formaction="URL" — указывает на адрес программы, которая будет обрабатывать данные введённые в тег input, аналогичен атрибуту action=" " у тега form

formenctype=" " — указывает на способ кодировния данных при их отправки на сервер, аналогичен атрибуту enctype=" ", у тега form, имеет следующие значения:
application/x-www-form-urlencoded — не латинские символы кодируются их шестнадцатеричными кодами, пробелы заменяются знаком +, является значением по умолчанию,
multipart/form-data — данные не кодируются,
text/plain — данные не кодируются, но пробелы заменяются знаком +

formmethod="get/post" — указывает каким методом отправить данные, post или get

formnovalidate="formnovalidate" — отключает встроенную проверку данных, аналогичен атрибуту novalidate="novalidate" у тега form

formtarget="имя окна/_blank/_self/_parent/_top" — указывет на окно в которое будет загружаться, результат обработки данных, аналогичен атрибуту target=" " у тега form

list="idName" — указывает на значение идентификатора id тега datalist, в котором находится список вариантов появляющиеся при вводе текста в поле.

max="число" — указывает на максимальное число, которое можно ввести в поле.

min="число" — указывает на минимальное число, которое можно ввести в поле.

multiple="multiple" — позволяет указать несколько e-mail адресов, в поле через запятую, или загрузить несколько файлов.

pattern="шаблон" — позволяет создавать шаблоны, исходя из которых принимается решение о верности или не верности введённых данных, атрибут предназначен для создания полей ввода, для различных типов данных.

placeholder="текст" — указывает на строку, которая находтся в текстовом поле, она исчезает когда пользователь начинает вводить данные.

readonly="readonly" — указывает на текстовое поле, в которое пользователь не может ввести данные.

required="required" — указывает на текстовое поле, которое обязательно должно быть заполненным, если пользователь попытается отправить данные не заполнив это поле, то браузер выдаст об этом сообщение ввиде всплывающей подсказки.

step=" " — указывает на шаг, при введении чисел.

Атрибут type=" "

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

type="color" — создаёт виджет выбора цвета.

type="date" — создаёт поле для ввода даты, при помощи виджета календаря (далее ВК).

type="datetime" — создаёт поле для ввода даты и времени, (ВК)

type="datetime-local" — создаёт поле для ввода даты и местного времени, (ВК)

type="email" — создаёт поле для ввода e-mail

type="month" — создаёт поле для ввода месяца, (ВК).

type="number" — создаёт поле для ввода числа.

type="range" — создаёт ползунок.

type="search" — создаёт поисковое поле.

type="tel" — создаёт поле для ввода телефонного номера.

type="time" — создаёт поле для ввода даты и времени, (ВК), без часового пояса.

type="url" — создаёт поле для ввода url.

type="week" — создаёт поле для ввода недели (ВК).

Тег <keygen>

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

Тег <output>

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

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

Добавить комментарий

(c) 2013-2015
HTML-5.ru - при использовании материалов сайта, ссылка обязательна.
Автор: Габрахимов Дамир Google