HTML
<form>
element
represents a document section containing interactive controls for submitting information.
It is possible to use the
:valid
and
:invalid
CSS
pseudo-classes
to style a
<form>
element based on whether or not the
元素
inside the form are valid.
| 内容类别 | 流内容 , palpable content |
|---|---|
| 准许内容 |
流内容
, but not containing
<form>
元素
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts flow content |
| Implicit ARIA role |
form
if the form has an
accessible name
,否则
no corresponding role
|
| Permitted ARIA roles |
search
,
none
or
presentation
|
| DOM 接口 |
HTMLFormElement
|
此元素包括 全局属性 .
accept
accept
attribute on
<input type=file>
元素。
accept-charset
autocapitalize
autocapitalize
attributes on a form elements override it on
<form>
. Possible values:
none
: No automatic capitalization.
sentences
(default): Capitalize the first letter of each sentence.
words
: Capitalize the first letter of each word.
characters
: Capitalize all characters — that is, uppercase.
autocomplete
autocomplete
attributes on form elements override it on
<form>
. Possible values:
off
: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see
The autocomplete attribute and login fields
)。
on
: The browser may automatically complete entries.
名称
id
instead). It must be unique among the forms in a document and not an empty string as of HTML5.
rel
rel
attribute for details.
The following attributes control behavior during form submission.
action
formaction
attribute on a
<button>
,
<input type="submit">
,或
<input type="image">
元素。
enctype
method
属性为
post
,
enctype
是
MIME 类型
of the form submission. Possible values:
application/x-www-form-urlencoded
: The default value.
multipart/form-data
: Use this if the form contains
<input>
elements with
type=file
.
text/plain
: Introduced by HTML5 for debugging purposes.
This value can be overridden by
formenctype
attributes on
<button>
,
<input type="submit">
,或
<input type="image">
元素。
method
post
:
POST method
; form data sent as the
request body
.
get
:
GET method
; form data appended to the
action
URL with a
?
separator. Use this method when the form
has no side-effects
.
dialog
: When the form is inside a
<dialog>
, closes the dialog on submission.
This value is overridden by
formmethod
attributes on
<button>
,
<input type="submit">
,或
<input type="image">
元素。
novalidate
formnovalidate
attribute on a
<button>
,
<input type="submit">
,或
<input type="image">
element belonging to the form.
target
_self
(default): Load into the same browsing context as the current one.
_blank
: Load into a new unnamed browsing context.
_parent
: Load into the parent browsing context of the current one. If no parent, behaves the same as
_self
.
_top
: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as
_self
.
This value can be overridden by a
formtarget
attribute on a
<button>
,
<input type="submit">
,或
<input type="image">
元素。
<!-- Form which will send a GET request to the current URL -->
<form>
<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>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
form
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
accept
弃用
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
accept-charset
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
action
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
autocapitalize
非标
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 完整支持 Yes | Samsung Internet Android 不支持 No |
autocomplete
|
Chrome
完整支持
Yes
注意事项
|
Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
enctype
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
method
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
名称
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
novalidate
|
Chrome 完整支持 10 | Edge 完整支持 12 | Firefox 完整支持 4 | IE 完整支持 10 | Opera 完整支持 15 | Safari 完整支持 10.1 | WebView Android 完整支持 37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 1.0 |
target
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
不支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
见实现注意事项。
<button>
,
<datalist>
,
<fieldset>
,
<input>
,
<keygen>
,
<label>
,
<legend>
,
<meter>
,
<optgroup>
,
<option>
,
<output>
,
<progress>
,
<select>
,
<textarea>
.
HTMLFormElement.elements
<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>