HTML5 расширяет возможности форм HTML4.
Новые типы input в HTML5 формах
Обратите внимание: на данный момент (Ноябрь 2011) новые типы input поддерживаются полностью только в браузерах Opera 11+ и Chrome 12+.
- input type=email определяет поле, которые должно содержать email адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
- input type=url определяет поле, которое должно содержать url адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
- input type=tel определяет поле для ввода телефонного номера. С помощью атрибута pattern Вы может установить формат принимаемого телефонного номера. Формат задается с помощью регулярных выражений.
- input type=number определяет поле, которое должно содержать числа. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min
(минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в
поле могут вводиться числа 0,2,4,6 и т.д.)
- input type=range определяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать мышкой.
Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число).
С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
- input type=search определяет поле поиска (может использоваться например для создания поиска по сайту).
Пример
<input name='email' type='email' value='Не email' />
<input name='url' type='url' value='Не url' />
<input name='tel1' type='tel' pattern='8[0-9]{10}' />
<input name='tel2' type='tel' pattern='[0-9]{2,3}-[0-9]{2}-[0-9]{2}' />
<input name='number' type='number' value='10' />
<input name='range' type='range' min='1' max='5' />
<input name='search' type='search' value='Поиск по сайту' />
<input name='color' type='color' />
Быстрый просмотр
Новые элементы в HTML5 формах
Обратите внимание: на данный момент (Ноябрь 2011) новые элементы форм поддерживаются полностью только в браузерах Firefox 4+ и Opera 10.50+.
- datalist позволяет привязать список к полям формы. Значения списка будут выводится как поисковые подсказки во время ввода информации в поле связанное с ним.
- keygen позволяет генерировать открытые и закрытые ключи, которые используются для безопасной связи с сервером.
- output может использоваться для вывода различной информации. С помощью атрибута for можно указать связанные поля.
Пример
<input name='city' list="city" />
<datalist id="city">
<option label="Москва" value="Москва, Россия" />
<option label="Санкт-Петербург" value="Санкт-Петербург, Россия" />
<option label="Новосибирск" value="Новосибирск, Новосибирская область, Россия" />
</datalist>
<keygen name='keygen' />
<output name='result' for='first second'>100</output>
Быстрый просмотр
Новые атрибуты в HTML5 формах
Обратите внимание: на данный момент (Ноябрь 2011) новые атрибуты элементов формы поддерживаются только в браузерах Firefox 4+, Opera 11+ и Chrome 10+.
- autofocus делает поле активным после загрузки страницы (может использоваться со всеми типами input).
- form указывает форму, которой принадлежит данное поле (может использоваться со всеми типами input).
- multiple указывает, что данное поле может принимать несколько значений одновременно (может использоваться с input типов email и file).
- novalidate указывает, что данное поле не должно проверяться перед отправкой (может использоваться с form и input).
- placeholder отображает текст-подсказку в поле
(может использоваться с input следующих типов: text, search, url, tel, email и password.).
- required указывает, что данное поле должно быть обязательно заполнено перед отправкой.
Пример
<input type='text' autofocus="autofocus" /><br /><br />
<input type='file' multiple='multiple' /><br /><br />
<input type='text' form='form1' /><br /><br />
<form action='html5.php' novalidate='novalidate'>
<input type='email' placeholder='Введите Ваш email' /><br /><br />
<input type='text' required="required" />
Быстрый просмотр
Выбор даты
В HTML5 были добавлены новые элементы ввода позволяющие удобно выбирать дату и время.
Обратите внимание: на данный момент (Ноябрь 2011) поля для выбора даты поддерживаются только в браузерах Opera 9+, Chrome 10+ и Safari 5.1+.
- date позволяет выбрать дату в формате год-месяц-день_месяца.
- time позволяет выбрать время.
- datetime позволяет выбрать дату в формате год-месяц-день_месяцаTвремяZ (отчет ведется по глобальному времени).
- datetime-local позволяет выбрать дату в формате год-месяц-день_месяцаTвремя (отчет ведется по местному времени).
- month позволяет выбрать дату в формате год-месяц.
- week позволяет выбрать дату в формате год-Wнеделя.
Пример
<input type='date' /><br />
<input type='time' /><br />
<input type='datetime' /><br />
<input type='datetime-local' /><br />
<input type='month' /><br />
<input type='week' /><br />
Быстрый просмотр