HTML-формы

HTML-форма собирает пользовательский ввод и отправляет его на сервер для обработки. Форма — это контейнер, элемент <form>, который содержит одно или несколько элементов управления: текстовые поля, флажки, переключатели, выпадающие списки и кнопки отправки. На этой странице рассматривается сам элемент <form>, элементы управления внутри него, способы отправки данных (GET и POST), а также подписи к полям и валидация ввода.

Элемент `<form>`

Любая форма начинается с тега <form>. Элементы управления, которые заполняет пользователь, располагаются между открывающим тегом <form> и закрывающим </form>. Два атрибута выполняют основную работу:

action — URL, на который отправляются данные формы при её отправке.
method — HTTP-метод для передачи данных: GET или POST.

<form action="/subscribe" method="POST">
  <!-- form controls go here -->
  <button type="submit">Subscribe</button>
</form>

Если опустить action, форма отправится на URL текущей страницы. Если опустить method, браузер по умолчанию использует GET.

Подписи к элементам управления

Каждое поле ввода должно иметь элемент <label>. Свяжите подпись с элементом управления, задав полю атрибут id и указав то же значение в атрибуте for подписи:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Text Input Example</h2>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" />

      <label for="surname">Surname:</label>
      <input type="text" id="surname" name="surname" />
    </form>
  </body>
</html>

Попробуйте сами »

Информация

Используйте настоящий <label> вместо обычного текста вроде Name:<br />. Связанная подпись зачитывается программами экранного доступа и увеличивает область нажатия, поэтому клик по подписи переводит фокус на поле. Подробнее — в главе тег HTML <label>.

Элемент HTML `<input>`

Элемент <input> — наиболее распространённый элемент управления формой. Атрибут type определяет его внешний вид и поведение: text, email, password, number, checkbox, radio, file, submit и многие другие.

Рассмотрим некоторые типы полей ввода.

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

<input type="text"> создаёт однострочное текстовое поле. Атрибут name — это ключ, который отправляется на сервер вместе со значением поля.

Пример текстового поля:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
</form>

Переключатель (radio)

<input type="radio"> позволяет пользователю выбрать ровно один вариант из набора. Переключатели одной группы имеют одинаковый атрибут name, поэтому выбор одного снимает выделение с остальных.

Пример переключателя:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Radio Button Example</h2>
    <form>
      <input type="radio" id="football" name="game" value="football" checked />
      <label for="football">Football</label>

      <input type="radio" id="basketball" name="game" value="basketball" />
      <label for="basketball">Basketball</label>
    </form>
  </body>
</html>

Попробуйте сами »

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

<input type="submit"> (или <button type="submit">) отправляет данные формы обработчику — URL сервера, указанному в атрибуте action формы.

Пример кнопки отправки:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>HTML Form Example</h2>
    <form action="/form/submit" method="POST">
      <label for="firstname">Name:</label>
      <input type="text" id="firstname" name="firstname" value="Tom" />

      <label for="lastname">Surname:</label>
      <input type="text" id="lastname" name="lastname" value="Brown" />

      <label for="age">Age:</label>
      <input type="number" id="age" name="age" value="21" />

      <input type="submit" value="Submit" />
    </form>
    <p>Click the Submit button to send the form data to the action page.</p>
  </body>
</html>

Попробуйте сами »

Другие элементы управления формой

Поля ввода — не единственные элементы управления. Следующие элементы позволяют добавить многострочный текст, выпадающие списки, пользовательские кнопки и группировку связанных полей.

Многострочный текст с `<textarea>`

Используйте <textarea> для ввода длинного текста, например комментариев или сообщений. В отличие от <input>, у него есть отдельные открывающий и закрывающий теги, а атрибуты rows/cols задают видимый размер.

<form>
  <label for="message">Your message:</label>
  <textarea id="message" name="message" rows="4" cols="40"></textarea>
</form>

Выпадающие списки с `<select>`

Элемент <select> создаёт выпадающий список. Каждый вариант — это <option>; значение value отправляется на сервер, а атрибут selected задаёт вариант по умолчанию.

<form>
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="us">United States</option>
    <option value="uk" selected>United Kingdom</option>
    <option value="ca">Canada</option>
  </select>
</form>

Элемент `<button>`

Элемент <button> гибче, чем <input type="submit">, поскольку может содержать HTML (текст, иконки). Всегда указывайте его type: submit отправляет форму, reset очищает её, а button сам по себе ничего не делает (используется вместе с JavaScript).

<form>
  <button type="submit">Send</button>
  <button type="reset">Clear</button>
</form>

Группировка с `<fieldset>` и `<legend>`

Оберните связанные элементы управления в <fieldset> и опишите группу с помощью <legend>. Это добавляет подписанную рамку и помогает пользователям программ экранного доступа понять, как связаны поля, — полезно для блока адреса или набора переключателей.

<form>
  <fieldset>
    <legend>Contact details</legend>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />

    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" />
  </fieldset>
</form>

Атрибут action

Атрибут action указывает URL, на который отправляются данные формы при её отправке. Когда пользователь нажимает кнопку отправки, браузер собирает значения элементов управления и отправляет их на этот URL.

<form action="/form/submit">

Атрибут target

Атрибут target определяет, где откроется результат обработки формы — в новой вкладке браузера, фрейме или текущем окне.

_self (по умолчанию) открывает результат в текущем окне.
_blank открывает результат в новой вкладке браузера.

<form action="/form/submit" target="_blank">

Атрибут method

Атрибут method определяет HTTP-метод — GET или POST — для отправки данных формы. Выбор метода влияет на то, куда попадают данные и что означает запрос.

Пример метода GET:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>The method Attribute With the GET Method</h2>
    <form action="/form/submit" method="GET">
      <label for="g-name">Name:</label>
      <input type="text" id="g-name" name="name" value="Tom" />

      <label for="g-surname">Surname:</label>
      <input type="text" id="g-surname" name="surname" value="Brown" />

      <label for="g-age">Age:</label>
      <input type="number" id="g-age" name="age" value="21" />

      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Попробуйте сами »

После отправки данные появляются в строке запроса URL, например: /form/submit?name=Tom&surname=Brown&age=21.

Пример метода POST:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>The method Attribute With the Post Method</h2>
    <form action="/form/submit" method="POST">
      <label for="p-name">Name:</label>
      <input type="text" id="p-name" name="name" value="Tom" />

      <label for="p-surname">Surname:</label>
      <input type="text" id="p-surname" name="surname" value="Brown" />

      <label for="p-age">Age:</label>
      <input type="number" id="p-age" name="age" value="21" />

      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Попробуйте сами »

При использовании POST данные передаются в теле запроса и не отображаются в URL.

GET и POST

Два метода по-разному отправляют данные и сигнализируют серверу о разных намерениях.

GET добавляет данные формы к URL в виде строки запроса:

Данные видны в адресной строке, их можно добавить в закладки или поделиться ссылкой.
URL имеет ограничение длины (обычно около 2048 символов), поэтому GET не подходит для больших объёмов данных.
GET является идемпотентным — повторный одинаковый запрос не должен ничего менять на сервере. Используйте его для поиска и фильтрации, когда данные только читаются.

Опасно

Не используйте GET для отправки паролей или других конфиденциальных данных — они окажутся видны в URL, истории браузера и журналах сервера.

POST отправляет данные в теле запроса:

Данные не отображаются в URL, и практического ограничения на размер нет, поэтому POST справляется с большими объёмами данных и загрузкой файлов.
Отправки через POST нельзя добавить в закладки.
POST предназначен для запросов, которые изменяют состояние сервера (создание аккаунта, публикация комментария, оформление заказа).

Совет

Практическое правило: используйте GET для чтения или поиска, а POST — для создания или изменения данных.

Валидация пользовательского ввода

HTML5 умеет проверять ввод в браузере до отправки формы — без JavaScript. Добавьте эти атрибуты к элементам управления:

Атрибут	Действие
`required`	Поле должно быть заполнено перед отправкой формы.
`minlength` / `maxlength`	Минимальное / максимальное количество символов для текстовых полей.
`min` / `max`	Наименьшее / наибольшее допустимое значение для числовых полей, диапазонов и дат.
`pattern`	Регулярное выражение, которому должно соответствовать значение.
`type`	Некоторые типы автоматически проверяют формат: `email`, `url`, `number`, `tel`.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Form Validation Example</h2>
    <form action="/form/submit" method="POST">
      <label for="user">Username (3–12 letters):</label>
      <input type="text" id="user" name="user"
             required minlength="3" maxlength="12" pattern="[A-Za-z]+" />

      <label for="mail">Email:</label>
      <input type="email" id="mail" name="mail" required />

      <label for="qty">Quantity (1–10):</label>
      <input type="number" id="qty" name="qty" min="1" max="10" />

      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Если значение не соответствует правилу, браузер блокирует отправку и показывает сообщение. Чтобы отключить встроенную проверку, добавьте атрибут novalidate к элементу <form>.

Атрибут enctype

Атрибут enctype задаёт способ кодирования данных формы при отправке методом POST:

application/x-www-form-urlencoded — по умолчанию; имена и значения полей кодируются в виде URL. Подходит для обычных текстовых форм.
multipart/form-data — обязателен, если форма содержит загрузку файла (<input type="file">), чтобы двоичные данные файла были переданы корректно.

<form action="/upload" method="POST" enctype="multipart/form-data">
  <label for="photo">Profile photo:</label>
  <input type="file" id="photo" name="photo" />
  <button type="submit">Upload</button>
</form>

Другие атрибуты

Ниже перечислены другие полезные атрибуты элемента <form>:

Атрибут	Описание
`accept-charset`	Кодировка символов для отправляемой формы (по умолчанию: кодировка страницы).
`autocomplete`	Разрешает ли браузер автозаполнение формы (по умолчанию: `on`).
`enctype`	Способ кодирования отправляемых данных (по умолчанию: `application/x-www-form-urlencoded`).
`name`	Имя для идентификации формы.
`novalidate`	Отключает валидацию формы браузером при отправке.

Связанные главы

Практика

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

idnamelabelvalue

Практика

Какой HTTP-метод следует использовать для отправки пароля и почему?

GET, потому что данные можно добавить в закладкиPOST, потому что данные передаются в теле запроса и не отображаются в URLGET, потому что у него нет ограничения на размерОба метода работают одинаково

Элемент <form>

Подписи к элементам управления

Элемент HTML <input>

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

Переключатель (radio)

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

Другие элементы управления формой

Многострочный текст с <textarea>

Выпадающие списки с <select>

Элемент <button>

Группировка с <fieldset> и <legend>

Атрибут action

Атрибут target

Атрибут method

Пример метода GET:

Пример метода POST:

GET и POST

Валидация пользовательского ввода

Атрибут enctype

Другие атрибуты

Связанные главы

Практика

Элемент `<form>`

Элемент HTML `<input>`

Многострочный текст с `<textarea>`

Выпадающие списки с `<select>`

Элемент `<button>`

Группировка с `<fieldset>` и `<legend>`