HTML5 элементов новой формы

HTML5 имеет следующие новые элементы формы:

• <datalist>
• <keygen>
• <output>

Примечание: Не все основные браузеры поддерживают все новые элементы формы. Тем не менее, вы уже можете начать использовать их, если они не поддерживаются, они будут вести себя как обычные текстовые поля.

HTML5 <datalist> элемент

Элемент <datalist> определяет список предопределенных вариантов <input> элемента.

Элемент <datalist> используется для "автозаполнения" функцию <input>. Пользователи будут видеть раскрывающийся список предопределенных вариантов, как они входных данных.

Используйте список атрибутов <input> элемента, чтобы привязать его вместе с элементом <datalist>.

Пример

<input> Элемент с заранее определенными значениями в <datalist>:

<input list="browsers" />

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

HTML5 <keygen> элемент

Цель <keygen> элементом является обеспечение безопасного способа аутентификации пользователей.

<keygen> Тег указывает ключевые пары генератор поля в форме.

При отправке формы, два ключа генерируется одна частная и одна общественности.

Секретный ключ хранится локально, а открытый ключ передается на сервер. Открытый ключ может быть использован для создания клиентских сертификатов для аутентификации пользователей в будущем.

Пример

Форма с полем серийник:

<form action="demo_keygen.asp" method="get">
  Username: <input type="text" name="usr_name" />
  Encryption: <keygen name="security" />
  <input type="submit" />
</form>

HTML5 <output> элемент

<output> Элемент представляет собой результат вычисления (как один выполняется скрипт).

Пример

Выполните расчет и показать результат в элементе <output>:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" name="a" value="50" />100
  +<input type="number" name="b" value="50" />
  =<output name="x" for="a b"></output>
</form>

HTML5 элементов новой формы