HTML Элементы формы

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

Элемент <input>

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

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

Все различные типы входных данных рассматриваются в следующей главе.

Элемент <select>

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

Элементы <option> определяют параметр, который может быть выбран.

По умолчанию выбирается первый элемент в раскрывающемся списке.

Чтобы определить предварительно выбранный параметр, добавьте атрибут selected к параметру:

Видимые значения:

Используйте атрибут size для указания количества видимых значений:

Разрешить множественный выбор:

Используйте атрибут multiple, чтобы позволить пользователю выбрать более одного значения:

Элемент <textarea>

<textarea> элемент определяет многострочное поле ввода (область текста):

Атрибут rows указывает видимое число строк в текстовой области.

Атрибут cols определяет видимую ширину текстовой области.

Таким образом, HTML-код выше будет отображаться в браузере:

Можно также определить размер текстовой области с помощью CSS:

Элемент <Button>

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

Таким образом, HTML-код выше будет отображаться в браузере:

Элементы формы HTML5

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

• <datalist>
• <output>

HTML5 <DataList> элемент

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

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

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

Example

<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 <Output> элемент

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

Example

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

<form action="/action_page.php"
  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>

Просмотр демо в редакторе

Элементы HTML-формы

= Новый в HTML5.