Резюме
Элемент HTML form (<form>
) представляет секцию документа, содержащую интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.
Можно использовать :valid
и :invalid
CSS псевдоклассы для стилизации <form>
элемента.
Контекст Использования
Категория содержимого | Flow content |
Разрешённое содержимое | Flow content, но не содержащий <form> элементов |
Пропуск тега | Нет. И открывающий и закрывающий тег должны быть. |
Нормативный документ | HTML5, section 4.10.3 (HTML4.01, section 17.3) |
Атрибуты
Как и все HTML элементы, этот элемент поддерживает глобальные атрибуты.
accept
HTML 4- Список, разделенный запятой, типов содержимого, который принимает сервер.
accept-charset
- Список кодировок, которые принимает сервер. Список может быть разделен пробелами или запятыми. Браузеры используют значения, в порядке, в котором они указаны. Значение по умолчанию зарезервировано строкой "UNKNOWN", в случае которого, кодировка соответствует кодировке документа, содержащий элемент fomr.
HTML 4: в предыдущей версии HTML, различные кодировки могли быть разделены пробелами или запятыми. В HTML5, подерживаются только пробелы, в качестве разделителей. action
- URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута
formaction
на<button>
или<input>
элементе. autocomplete
HTML5- Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписано с помощью атрибута
autocomplete
на элементе формы. Возможные значения:off
: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.on
: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.
Примечание: Если вы установит
autocomplete
вoff
в форме, потому что документ предоставляет своё собственное автодополнение, то вам следует также установитьautocomplete
вoff
для каждого 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.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) | ? | ? | ? |
Google Chrome заметки
Google Chrome UI для auto-complete требует различных, зависит от установлен ли autocomplete
в off
на input
элементах, также как их форма. Особенно, когда форма имеет autocomplete
в off
и её input элементы с полем autocomplete
с не установленным полем, тогда если пользователь попросит о предположениях для автозаполнении 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>
.