<form>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

Интерактивный пример

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

Атрибуты

Как и все HTML-элементы, этот элемент поддерживает глобальные атрибуты.

accept

Список типов содержимого, разделённых запятой, которые принимает сервер.

Примечание: Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте accept атрибут заданного <input> элемента.

accept-charset

Кодировка символов принимаемая сервером. Спецификация допускает единственное регистронезависимое значение "UTF-8", что отражает повсеместное распространение этой кодировки (исторически можно было указать несколько кодировок символов в виде списка, разделённого запятыми или пробелами).

action

URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута formaction на <button> или <input> элементе.

autocomplete

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

  • off: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.
  • on: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.

    **Примечание:**Если вы установили значение off для autocomplete атрибута формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение off для autocomplete каждого <input> элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите Google Chrome notes.

enctype

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

  • application/x-www-form-urlencoded: Значение по умолчанию, если атрибут не задан.
  • multipart/form-data: Используйте это значение, если пользуетесь элементом <input> атрибутом type установленным в "file".
  • text/plain (HTML5) Это значение может быть переписано атрибутом formenctype на элементе <button> или <input>.
method

HTTP метод, который браузер использует, для отправки формы. Возможные значения:

  • post: Соответствует HTTP POST методу ; данные из формы включаются в тело формы и посылаются на сервер.
  • get: Соответствует GET методу; данные из формы добавляются к URI атрибута action, их разделяет '?', и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.Это значение может быть переписано атрибутом formmethod на <button> или <input> элементе.
name

Имя формы. В HTML 4 его использование запрещено (id следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.

novalidate

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

target

Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, контекста просмотра (например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имеют специальное значение:

  • _self: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.
  • _blank: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.
  • _parent: Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра. Если нет предка, эта опция действует точно так же как as _self.
  • _top: HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as _self.HTML5: Это значение может быть перезаписано formtarget атрибутом на <button> или <input> элементе.

Примеры

html
<!-- Простая форма, которая пошлёт GET запрос -->
<form action="">
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name" />
  <input type="submit" value="Save" />
</form>

<!-- Простая форма, которая пошлёт POST запрос -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name" />
  <input type="submit" value="Save" />
</form>

<!-- Форма с fieldset, legend, и label -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio" />
    <label for="radio">Click me</label>
  </fieldset>
</form>

Техническая сводка

Категория содержимого Flow content
Разрешённое содержимое Flow content, но не содержащий <form> элементов
Пропуск тега Нет. И открывающий и закрывающий тег должны быть.
Нормативный документ HTML5, section 4.10.3 (HTML4.01, section 17.3)

Спецификации

Specification
HTML
# the-form-element

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
form
accept-charset
action
autocomplete
new-password value
one-time-code value
webauthn value
Experimental
enctype
method
name
novalidate
rel
target

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Смотрите также