HTML Формы

HTML‑форма используется для сбора данных от пользователя.

Данные, введённые пользователем, чаще всего отправляются на сервер для обработки.

Пример

Элемент <form>

HTML‑элемент <form> используется для создания HTML‑формы для ввода данных пользователем:

<form>
  <!-- элементы формы -->
</form>

Элемент <form> — это контейнер для различных типов элементов ввода, таких как текстовые поля, флажки, радиокнопки, кнопки отправки и т. д.

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

Элемент <input>

HTML‑элемент <input> — наиболее часто используемый элемент формы.

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

Вот несколько примеров:

Тип	Описание
`<input type="text">`	Отображает текстовое поле для ввода одной строки текста
`<input type="radio">`	Отображает радиокнопку (для выбора одного варианта из нескольких)
`<input type="checkbox">`	Отображает флажок (для выбора нуля или нескольких вариантов из множества)
`<input type="submit">`	Отображает кнопку отправки (для отправки формы)
`<input type="button">`	Отображает кликабельную кнопку

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

Текстовые поля

Элемент <input type="text"> определяет однострочное поле ввода текста.

Пример

Форма с полями ввода текста:

<form>
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname">
</form>

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

Примечание: Сама форма не видна. Также обратите внимание, что ширина поля ввода по умолчанию составляет 20 символов.

Элемент <label>

Обратите внимание на использование элемента <label> в примере выше.

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

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

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

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

Радиокнопки

Элемент <input type="radio"> определяет радиокнопку.

Радиокнопки позволяют пользователю выбрать ОДИН вариант из ограниченного числа вариантов.

Пример

Форма с радиокнопками:

<p>Выберите ваш любимый веб‑язык:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

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

Выберите ваш любимый веб‑язык:

Флажки

Элемент <input type="checkbox"> определяет флажок.

Флажки позволяют пользователю выбрать НОЛЬ ИЛИ БОЛЕЕ вариантов из ограниченного числа вариантов.

Пример

Форма с флажками:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1">У меня есть велосипед</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2">У меня есть автомобиль</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3">У меня есть лодка</label>
</form>

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

Кнопка отправки

Элемент <input type="submit"> определяет кнопку для отправки данных формы обработчику формы.

Обработчик формы — это обычно файл на сервере со скриптом для обработки введённых данных.

Обработчик формы указывается в атрибуте action формы.

Пример

Форма с кнопкой отправки:

<form action="/action_page.php">
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Фамилия:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Отправить">
</form>

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

Атрибут name для <input>

Обратите внимание: каждое поле ввода должно иметь атрибут name, чтобы его данные могли быть отправлены.

Если атрибут name опущен, значение поля ввода не будет отправлено вообще.

Пример

В этом примере значение поля ввода «Имя» не будет отправлено:

<form action="/action_page.php">
  <label for="fname">Имя:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Отправить">
</form>