English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 имеет несколько элементов и атрибутов, связанных с формами.
HTML5 имеет следующие новые элементы форм:
<datalist>
<keygen>
<output>
Внимание:Не все браузеры поддерживают новые элементы форм HTML5, но вы можете использовать их, даже если браузер не поддерживает атрибуты форм, они все равно будут отображаться как обычные элементы форм.
Элемент <datalist> определяет список вариантов ввода области ввода.
Атрибут <datalist> определяет, что форма или область ввода должны иметь функцию автоматического завершения. Когда пользователь начинает вводить в области автоматического завершения, браузер должен отображать заполненные варианты в этой области:
Использование свойства списка элемента <input> и привязка к элементу <datalist>.
Элемент <input> использует предварительно определенные значения <datalist>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> <input list="languages" name="language"> <datalist id="languages"> <option value="C++"> <option value="PHP"> <option value="Golang"> <option value="Python"> <option value="Ruby"> </datalist> <input type="submit"> </form> <p><strong>Внимание:</strong> браузеры Internet Explorer 9 (и более ранние версии IE), Safari не поддерживают тег datalist.</p> </body> </html>Проверьте, как это работает ‹/›
Элемент <keygen> предоставляет надежный способ проверки пользователя.
Тег <keygen> определяет поле генератора пар ключей для формы.
При отправке формы генерируются два ключа: один приватный и один открытый.
Приватный ключ хранится на клиенте, а открытый ключ отправляется на сервер. Открытый ключ можно использовать для проверки клиентского сертификата (client certificate) в будущем.
Форма с полем keygen:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form action="demo_form.php" method="get"> Имя пользователя: <input type="text" name="username"> Шифрование: <keygen name="security_keygen"> <input type="submit"> </form> <p><strong>Внимание:</strong> браузер Internet Explorer не поддерживает тег keygen.</p> </body> </html>Проверьте, как это работает ‹/›
<output> элемент используется для различных типов вывода, например, вычислений или вывода скриптов:
Результат вычислений отображается в элементе <output>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной курс (oldtoolbag.com)</title> </head> <body> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"> </form> <p><strong>Внимание:</strong> Internet Explorer не поддерживает тег output.</p> </body> </html>Проверьте, как это работает ‹/›
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Html5中的智能表单 oldtoolbag.com</title> </head> <body> <form action="demo-form.php"> <fieldset> <legend>Html5中的智能表单</legend> <label for="email"> email：<input type="email" name="email" id="email"/> </label> <label for="tel"> tel:<input type="tel" name="tel" id="tel"/> </label> <label for="url"> url:<input type="url" name="" id="url"/> </label> <label for="number"> number:<input type="number" name="" id="number" step="3"/> </label> <label for="search"> search:<input type="search" name="" id="search"/> </label> <label for="range"> range:<input type="range" name="" id="range" value="60" min="0" max="100"/> </label> <label for="color"> color:<input type="color" name="" id="color"/> </label> <label for="time"> time:<input type="time" name="" id="time"/> </label> <label for="date"> date:<input type="date" name="" id="date"/> </label> <label for="month"> month:<input type="month" name="" id="month"/> </label> <label for="week"> week:<input type="week" name="" id="week"/> </label> <input type="submit" value="Подтвердить"/> </fieldset> </form> </body> </html>Проверьте, как это работает ‹/›
| Тег | Описание |
| <datalist> | Тег <input> определяет список вариантов. Используйте этот элемент в сочетании с элементом input, чтобы определить возможные значения input. |
| <keygen> | Тег <keygen> определяет поле генератора пар ключей для формы. |
| <output> | Тег <output> определяет различные типы вывода, такие как вывод скриптов. |