<form>: Элемент формы

Элемент <form> HTML представляет собой раздел документа, содержащий интерактивные элементы управления для отправки информации.

Попробуйте

Можно использовать псевдоклассы CSS :valid и :invalid, чтобы стилизовать элемент <form> в зависимости от того, являются ли элементы elements внутри формы валидными.

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

accept Устаревший

Список типов контента (разделенные запятыми), которые принимает сервер.

Примечание: Этот атрибут устарел и не должен использоваться. Вместо этого используйте атрибут accept для элементов <input type=file>.

accept-charset

Список кодировок символов (разделенные пробелами), которые принимает сервер. Браузер использует их в указанном порядке. Значение по умолчанию означает ту же кодировку, что и у страницы. (В предыдущих версиях HTML кодировки символов также могли разделяться запятыми.)

autocapitalize

Управляет автоматическим прописным регистром вводимого текста и, если требуется, способом его применения. Подробнее см. страницу глобального атрибута autocapitalize.

autocomplete

Указывает, могут ли элементы ввода по умолчанию иметь свои значения, автоматически заполняемые браузером. autocomplete атрибуты на элементах формы переопределяют его для <form>. Возможные значения:

off: Браузер может не заполнять записи автоматически. (Браузеры, как правило, игнорируют это для предполагаемых форм входа; см. Управление автозаполнением для полей входа.)
on: Браузер может автоматически заполнять записи.

name

Имя формы. Значение не должно быть пустой строкой и должно быть уникальным среди элементов form в коллекции форм, к которой оно относится, если таковая имеется.

rel

Управляет аннотациями и типами ссылок, создаваемых формой. Аннотации включают external, nofollow, opener, noopener и noreferrer. Типы ссылок включают help, prev, next, search и license. Значение атрибута rel представляет собой список этих перечисленных значений, разделенных пробелами.

Атрибуты для отправки формы

Следующие атрибуты управляют поведением при отправке формы.

action

URL, обрабатывающий отправку формы. Это значение может быть переопределено атрибутом formaction на элементе <button>, <input type="submit"> или <input type="image">. Этот атрибут игнорируется, если установлено method="dialog".

enctype

Если значение атрибута method равно post, то enctype является типом MIME отправки формы. Возможные значения:

application/x-www-form-urlencoded: Значение по умолчанию.
multipart/form-data: Используйте это, если форма содержит элементы <input> с type=file.
text/plain: Полезно для отладки.

Это значение можно переопределить с помощью атрибутов formenctype на элементах <button>, <input type="submit"> или <input type="image">.

method

Метод HTTP для отправки формы. Допустимы только следующие методы/значения (регистр не учитывается):

post: Метод POST; данные формы отправляются в теле запроса.
get (по умолчанию): Метод GET; данные формы добавляются к URL с разделителем action. Используйте этот метод, когда форма не имеет побочных эффектов.
dialog: Когда форма находится внутри <dialog>, закрывает диалог и вызывает событие submit при отправке, не отправляя данные и не очищая форму.

Это значение переопределяется с помощью атрибутов formmethod на элементах <button>, <input type="submit"> или <input type="image">.

novalidate

Этот булевый атрибут указывает, что форма не должна проверяться при отправке. Если этот атрибут не установлен (а следовательно, форма проверяется), его можно переопределить с помощью атрибута formnovalidate на элементе <button>, <input type="submit"> или <input type="image">, принадлежащем форме.

target

Указывает, где отобразить ответ после отправки формы. Это имя/ключевое слово для контекста просмотра (например, вкладка, окно или iframe). Следующие ключевые слова имеют особое значение:

_self (по умолчанию): Загрузка в тот же контекст просмотра, что и текущий.
_blank: Загрузка в новый безымянный контекст просмотра. Это обеспечивает то же поведение, что и установка rel="noopener", которая не устанавливает window.opener.
_parent: Загрузка в родительский контекст просмотра текущего. Если родителя нет, поведение такое же, как _self.
_top: Загрузка в верхнеуровневый контекст просмотра (т. е. контекст просмотра, являющийся предком текущего и не имеющий родителя). Если родителя нет, поведение такое же, как _self.
_unfencedTop: Загрузка ответа из формы внутри встроенной рамки с защищенной областью в верхний фрейм (т. е. переход за пределы корня рамки с защищенной областью, в отличие от других зарезервированных пунктов назначения). Доступно только внутри рамок с защищенной областью.

Это значение может быть переопределено с помощью атрибута formtarget на элементе <button>, <input type="submit"> или <input type="image">.

Примеры

html

<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

Результат

Техническое описание

Категории контента	Потоковый контент, осязаемый контент
Разрешённый контент	Потоковый контент, но без включения элементов `<form>`
Пропуск тега	Нельзя, обязательны как открывающий, так и закрывающий теги.
Разрешённые родительские элементы	Любой элемент, принимающий потоковый контент
Неявная ARIA роль	`form`
Разрешённые ARIA роли	`search`, `none` или `presentation`
Интерфейс DOM	`HTMLFormElement`

Технические характеристики

Спецификация
Стандарт HTML # the-form-element

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`form`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4
`accept-charset`	1	12	1	15	3	18	4	14	2	1.0	4.4
`action`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4
`autocomplete`	14 Интерфейс Google Chrome для запроса автозаполнения изменяется в зависимости от того, установлено ли `autocomplete` в `off` для элементов `<input>` и форм. В частности, когда у формы установлено `autocomplete` в `off`, а у элемента `<input>` не установлено атрибут `autocomplete`, то при запросе пользователем автозаполнения для элемента `<input>`, Chrome может отобразить сообщение «Автозаполнение отключено для этой формы». С другой стороны, если у формы и элемента ввода установлено `autocomplete` в `off`, браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в `off` для каждого элемента `<input>`, у которого настроено пользовательское автозаполнение.	12	4	15 Интерфейс Opera для запроса автозаполнения изменяется в зависимости от того, установлено ли `autocomplete` в `off` для элементов `<input>` и форм. В частности, когда у формы установлено `autocomplete` в `off`, а у элемента `<input>` не установлено атрибут `autocomplete`, то при запросе пользователем автозаполнения для элемента `<input>`, Opera может отобразить сообщение «Автозаполнение отключено для этой формы». С другой стороны, если у формы и элемента ввода установлено `autocomplete` в `off`, браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в `off` для каждого элемента `<input>`, у которого настроено пользовательское автозаполнение.	6	18 Интерфейс Google Chrome для запроса автозаполнения изменяется в зависимости от того, установлено ли `autocomplete` в `off` для элементов `<input>` и форм. В частности, когда у формы установлено `autocomplete` в `off`, а у элемента `<input>` не установлено атрибут `autocomplete`, то при запросе пользователем автозаполнения для элемента `<input>`, Chrome может отобразить сообщение «Автозаполнение отключено для этой формы». С другой стороны, если у формы и элемента ввода установлено `autocomplete` в `off`, браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в `off` для каждого элемента `<input>`, у которого настроено пользовательское автозаполнение.	4	14 Интерфейс Opera для запроса автозаполнения изменяется в зависимости от того, установлено ли `autocomplete` в `off` для элементов `<input>` и форм. В частности, когда у формы установлено `autocomplete` в `off`, а у элемента `<input>` не установлено атрибут `autocomplete`, то при запросе пользователем автозаполнения для элемента `<input>`, Opera может отобразить сообщение «Автозаполнение отключено для этой формы». С другой стороны, если у формы и элемента ввода установлено `autocomplete` в `off`, браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в `off` для каждого элемента `<input>`, у которого настроено пользовательское автозаполнение.	6	1.0 Интерфейс Samsung Internet для запроса автозаполнения изменяется в зависимости от того, установлено ли `autocomplete` в `off` для элементов `<input>` и форм. В частности, когда у формы установлено `autocomplete` в `off`, а у элемента `<input>` не установлено атрибут `autocomplete`, то при запросе пользователем автозаполнения для элемента `<input>`, Samsung Internet может отобразить сообщение «Автозаполнение отключено для этой формы». С другой стороны, если у формы и элемента ввода установлено `autocomplete` в `off`, браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в `off` для каждого элемента `<input>`, у которого настроено пользовательское автозаполнение.	4.4 Интерфейс Google Chrome для запроса автозаполнения изменяется в зависимости от того, установлено ли `autocomplete` в `off` для элементов `<input>` и форм. В частности, когда у формы установлено `autocomplete` в `off`, а у элемента `<input>` не установлено атрибут `autocomplete`, то при запросе пользователем автозаполнения для элемента `<input>`, Chrome может отобразить сообщение «Автозаполнение отключено для этой формы». С другой стороны, если у формы и элемента ввода установлено `autocomplete` в `off`, браузер не отобразит это сообщение. По этой причине вы должны установить `autocomplete` в `off` для каждого элемента `<input>`, у которого настроено пользовательское автозаполнение.
`enctype`	1	12	1	15	3	18	4	14	2	1.0	4.4
`method`	1	12	1	15	3	18	4	14	2	1.0	4.4
`name`	1	12	1	15	3	18	4	14	2	1.0	4.4
`novalidate`	10	12	4	15	10.1	18	4	14	10.3	1.0	37
`rel`	108	108	111	94	15.4	108	111	73	15.4	21.0	108
`target`	1	12	1	15	3	18	4	14	2	1.0	4.4

См. также

Руководство по HTML-формам
Другие элементы, используемые при создании форм: <button>, <datalist>, <fieldset>, <input>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.
Получение списка элементов формы: HTMLFormElement.elements
ARIA: Роль формы
ARIA: Роль поиска

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form