Новые input в формах

· 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 определяет поле поиска (может использоваться например для создания поиска по сайту).

Новые элементы форм:

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

Новые атрибуты:

· autofocus делает поле активным после загрузки страницы (может использоваться со всеми типами input).

· form указывает форму, которой принадлежит данное поле (может использоваться со всеми типами input).

· multiple указывает, что данное поле может принимать несколько значений одновременно (может использоваться с input типов email и file).

· novalidate указывает, что данное поле не должно проверяться перед отправкой (может использоваться с form и input).

· placeholder отображает текст-подсказку в поле (может использоваться с input следующих типов: text, search, url, tel, email и password.).

· required указывает, что данное поле должно быть обязательно заполнено перед отправкой.

Выбор даты:

· date позволяет выбрать дату в формате год-месяц-день_месяца.

· time позволяет выбрать время.

· datetime позволяет выбрать дату в формате год-месяц-день_месяцаTвремяZ (отчет ведется по глобальному времени).

· datetime-local позволяет выбрать дату в формате год-месяц-день_месяцаTвремя (отчет ведется по местному времени).

· month позволяет выбрать дату в формате год-месяц.

· week позволяет выбрать дату в формате год-Wнеделя.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: