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 />