HTML элементов формы

HTML элементов формы

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

Например, формы могут быть использованы для ввода данных доставки или кредитной карты, чтобы заказать товар, или могут быть использованы для получения результатов поиска из поисковой системы.

В этой главе описаны все элементы HTML формы.

<input> Элемент

Наиболее важный элемент формы является <input> элемент.

<input> элемент может варьироваться разными способами, в зависимости от type атрибута.

<select> Элемент (Drop-Down List)

<select> элемент определяет выпадающий список:

<option> Элементы определяет параметры для выбора.

Список обычно показывает первый элемент, как выбран.

Вы можете добавить выбранный атрибут для определения предварительно заданного параметра.

<textarea> Элемент

<textarea> элемент определяет поле ввода многострочного ( a text area ) :

Это как HTML код выше будет отображаться в браузере:

Кошка играет в саду.

<button> Элемент

<button> элемент определяет кнопку интерактивную:

Это как HTML код выше будет отображаться в браузере:

Нажми на меня!

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

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

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

HTML5 <datalist> Элемент

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

Пользователи будут видеть выпадающий список предопределенных вариантов, как они входные данные.

list атрибут <input> элемента, должен относиться к id атрибуту <datalist> элемента.

пример

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

<form action="action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Попробуй сам "

HTML5 <keygen> Элемент

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

<keygen> элемент определяет поле генератора пара ключей в форме.

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

Секретный ключ хранится локально, а открытый ключ передается на сервер.

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

пример

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

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

Попробуй сам "

HTML5 <output> Элемент

<output> элемент представляет собой результат вычисления (например , один , выполняемый с помощью сценария).

пример

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

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

Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 »

HTML элементов формы

= Новый в HTML5.