HTML тег `<form>`

Значение и применение

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

Попробуйте form в тренажёре HTML-форм: настройте поле, проверьте ввод и разберите результат.

Синтаксически парный тег <form> определяет форму в HTML документе. Элемент <form> по большому счету просто является контейнером, внутри которого могут размещаться различные надписи, элементы управления и типы входных элементов, флажки, радио-кнопки, кнопки отправки и прочие HTML элементы.

Элемент имеет следующий синтаксис:

HTML

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

Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу.

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

Посетитель ввёл Анна в текстовое поле с name="owner" и id="owner-field". Браузер собирает пару owner=Анна и отправляет её обработчику, указанному в action, здесь /submit. Имя пары берётся из name, а id идентифицирует поле в документе и не заменяет name. — Обычная отправка формы на сервер: браузер собирает данные полей и передаёт их по адресу из `action`. Пара `owner=Анна` показана до кодирования.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.form
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`form`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`accept-charset`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`action`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`autocomplete`	✓14	✓12	✓4	✓15	✓6	✓18	✓4	✓14	✓6	✓1.0	✓4.4	✓6
`new-password`	✓69	✓79	✓69	✓56	✓10	✓69	✓79	✓48	✓10	✓10.0	✓69	✓10
`one-time-code`	✓93	✓93	✓109	✓79	✓12	✓84	✓109	✓60	✓12	✓14.0	×	✓12
`webauthn`	✓108	✓108	✓122	✓94	✓16.4	✓108	✓122	✓73	✓16.4	✓21.0	✓108	✓16.4
`enctype`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`method`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`name`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`novalidate`	✓10	✓12	✓4	✓15	✓10.1	✓18	✓4	✓14	✓10.3	✓1.0	✓37	✓10.3
`rel`	✓108	✓108	✓111	✓94	✓15.4	✓108	✓111	✓73	✓15.4	✓21.0	✓108	✓15.4
`target`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
Ещё 10 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`accept`	`file_type`	Не поддерживается в HTML5. Определяет разделенный запятыми список типов файлов, которые принимает сервер (который может быть представлен через загрузку файлов).
`accept-charset`	`UTF-8`	Для современной формы допустимо значение `UTF-8`.
`action`	`URL`	Определяет адрес, куда отправляется форма (по умолчанию действие установлено на текущую страницу).
`autocomplete`	`on off`	Указывает может ли браузер автоматически заполнять элементы формы (по умолчанию - включен). Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее (если не отключено настройками браузера).
`enctype`	`application/x-www-form-urlencoded multipart/form-data text/plain`	Определяет способ кодирования данных формы при их отправке. Значение по умолчанию `application/x-www-form-urlencoded`.
`method`	`get \| post \| dialog`	`get` передаёт данные в URL, `post` — в теле запроса. `dialog` закрывает содержащий форму диалог без сетевой отправки.
`name`	`text`	Определяет имя формы, которое используется для идентификации (задает имя для формы).
`novalidate`	`novalidate`	Указывает, что проверка данных на корректность, введенных пользователем в форму не производится.
`target`	`_blank _self _parent _top framename`	При помощи атрибута мы задаём браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение `_self` - отображает ответ в текущем окне.
`rel`	Токены отношений	Отношение между документом и ответом на отправку, например `noopener`, `noreferrer` или `search`.

Не вкладывайте одну форму в другую. Отправляются пары name=value участвующих полей: отключённые поля и неотмеченные флажки исключаются. Проверка браузера помогает заполнению, но не заменяет проверку сервером. POST не шифрует данные; за защищённый транспорт отвечает HTTPS.

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

Поля формы

Измените поля и нажмите «Сбросить». Кнопка «Проверить» запускает встроенную проверку; отправка из предпросмотра отключена.

index.html

HTML

<form>
  <p>
    <label>Имя <input name="user" required /></label>
  </p>
  <p>
    <label>Почта <input type="email" name="email" /></label>
  </p>
  <button type="reset">Сбросить</button><button type="submit">Проверить</button>
</form>

Отличия HTML 4.01 от HTML 5

В HTML5 добавлены два новых атрибута: autocomplete и novalidate, атрибут accept был удалён.

Значение CSS по умолчанию

CSS

form {
display: block;
margin-top: 0;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".