Резюме
Элемент HTML form (<form>
) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.
Можно использовать :valid
и :invalid
CSS псевдоклассы для стилизации <form>
элемента, в зависимости от того, валиден или нет конкретный элемент elements
внутри формы.
Контекст Использования
Категория содержимого | Flow content |
Разрешённое содержимое | Flow content, но не содержащий <form> элементов |
Пропуск тега | Нет. И открывающий и закрывающий тег должны быть. |
Нормативный документ | HTML5, section 4.10.3 (HTML4.01, section 17.3) |
Атрибуты
Как и все HTML элементы, этот элемент поддерживает глобальные атрибуты.
accept
HTML 4- Список типов содержимого, разделенных запятой, которые принимает сервер.
accept-charset
- Разделенные пробелами символьные кодировки, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку что и у страницы.
(В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.) action
- URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута
formaction
на<button>
или<input>
элементе. autocomplete
HTML5- Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута
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
HTML5- Это 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>
элементе.
DOM_interface
Этот элемент реализует HTMLFormElement
интерфейс.
Примеры
<!-- Простая форма, которая пошлёт 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>
Совместимость браузера
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0[1] | 1.0 (1.7 или ранее) | (Да) | (Да) | (Да) |
novalidate attribute |
1.0 | 4.0 (2.0) | Нет | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Да) | 1.0 (1.0) | (Да) | (Да) | (Да) |
novalidate attribute |
? | 4.0 (2.0) | ? | ? | ? |
[1] Интерфейс для автодополнений в Google Chrome может меняться при запросе, в зависимости от утверждения установлен ли autocomplete
со значеним off
на <input>
элементах формы, так же как и на самой форме. С одной стороны, когда autocomplete
со значеним off
установлен для формы, но при этом не установлен для её <input>
элементов, при запросе пользователя автоматически заполнить поля формы, Chrome может отобразить сообщение "autocomplete has been disabled for this form." С другой стороны, если и форма и её input элементы имеют autocomplete
со значеним off
, браузер не отобразит это сообщение. По этой причине, вам следует устанавливать атрибуту autocomplete
значение off
для каждого <input>
у которого стоит нестандартное автодополнение.
Смотрите также
- Другие элементы, которые используются для создания форм:
<button>
,<datalist>
,<fieldset>
,<input>
,<keygen>
,<label>
,<legend>
,<meter>
,<optgroup>
,<option>
,<output>
,<progress>
,<select>
,<textarea>
.