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

Эта глава описывает все различные элементы HTML форм.

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

Элемент HTML <form> может содержать один или несколько следующих элементов формы:

<input>;
<label>;
<select>;
<textarea>;
<button>;
<fieldset>;
<legend>;
<datalist>;
<output>;
<option>;
<optgroup>.

Элемент <input>

Один из наиболее часто используемых элементов формы — это элемент <input>.

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

Пример

<label for="fname">Имя:</label>
<input type="text" id="fname" name="fname">

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

Элемент <label>

Элемент <label> определяет метку для нескольких элементов формы.

Элемент <label> полезен для пользователей программ чтения с экрана, поскольку программа озвучивает метку, когда пользователь фокусируется на элементе ввода.

Элемент <label> также помогает пользователям, которым трудно нажимать на очень маленькие области (например, на радиокнопки или флажки), — когда пользователь кликает по тексту внутри элемента <label>, это переключает радиокнопку/флажок.

Атрибут for тега <label> должен совпадать с атрибутом id элемента <input>, чтобы связать их вместе.

Элемент <select>

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

Пример

<label for="cars">Выберите автомобиль:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

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

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

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

Пример

<option value="fiat" selected>Fiat</option>

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

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

Пример

<label for="cars">Выберите автомобиль:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

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

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

Пример

<label for="cars">Выберите автомобиль:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Элемент <textarea>

Элемент <textarea> определяет многострочное поле ввода (текстовую область).

Пример

<textarea name="message" rows="10" cols="30">
Кот играл в саду.
</textarea>

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

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

Вот как приведённый выше HTML‑код будет отображаться в браузере:

Вы также можете определить размер текстовой области с помощью CSS.

Пример

<textarea name="message" style="width:200px; height:600px;">
Кот играл в саду.
</textarea>

Элемент <button>

Элемент <button> определяет кликабельную кнопку.

Пример

<button type="button" onclick="alert('Привет, мир!')">Нажмите меня!</button>

Вот как приведённый выше HTML‑код будет отображаться в браузере:

Примечание: Всегда указывайте атрибут type для элемента кнопки. Разные браузеры могут использовать разные типы по умолчанию для элемента кнопки.

Элементы <fieldset> и <legend>

Элемент <fieldset> используется для группировки связанных данных в форме.

Элемент <legend> определяет заголовок для элемента <fieldset>.

Пример

<form action="/action_page.php">
  <fieldset>
    <legend>Личные данные:</legend>
    <label for="fname">Имя:</label><br>
    <input type="text" id="fname" name="fname" value="Джон"><br>
    <label for="lname">Фамилия:</label><br>
    <input type="text" id="lname" name="lname" value="Доу"><br><br>
    <input type="submit" value="Отправить">
  </fieldset>
</form>

Вот как приведённый выше HTML‑код будет отображаться в браузере:

Элемент <datalist>

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

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

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

Пример

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

Элемент <output>

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

Пример

Выполнение вычисления и отображение результата в элементе <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>