form
<form>
HTML<form>元素表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。
可以用:valid
和:invalid
CSS 伪类 来给一个元素指定样式。
内容类别 | 流量的内容,明显的内容 |
---|---|
允许的内容 | 流内容,但不包含<form>元素 |
标记遗漏 | 没有,起始和结束标签都是强制性的。 |
允许的父母 | 任何接受流内容的元素 |
允许ARIA角色 | 组,演示文稿 |
DOM界面 | HTMLFormElement |
属性
这个元素包括一些 全局属性.
accept
HTML 4一个逗号分隔的列表,包括服务器能接受的内容类型。
可用性备注: 这个属性将会在HTML5中被移除并且不再被使用。作为替代,使用 <input>元素中的accept 属性。
accept-charset
一个空格分隔或逗号分隔的列表,这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串“UNKNOWN”。这个字符串指的是,和包含这个form元素的文档相同的编码。
在之前版本的HTML中,不同的字符编码可以用空格或逗号分隔。在HTML5中,只有空格可以允许作为分隔符。
none
: 完全禁用自动首字母大写.
sentences
: 自动对每句话首字母大写.
words
: 自动对每个单词首字母大写.
characters
: 自动大写所有的字母.
on
: 从 iOS 5 以后不被推荐使用.
off
: 从 iOS 5 以后不被推荐使用.
autocomplete
HTML5用于指示 input 元素是否能够拥有一个默认值,这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的autocomplete
属性重载(覆盖)。 可能的值有:
off
: 在每一个用到的输入域里,用户必须显式的输入一个值,或者document 以它自己的方式提供自动补全;浏览器不会自动补全输入。
on
: 浏览器能够根据用户之前在form里输入的值自动补全。
对于大多数设置autocomplete属性的现代浏览器(包括Firefox 38+,Google Chrome 34+,IE 11+),都不会阻止浏览器的密码管理器询问用户是否要存储登录字段(用户名和密码),如果用户允许浏览器在下次用户访问该页面时自动填写登录信息。请参阅自动填充属性和登录字段。
注意:
如果你在一个表单里把 autocomplete
设置成 off
是因为 document 提供了它独有的自动补全,那么你也应该把这个表单里每一个 input 元素的 autocomplete
设成off
来让 document 能够自动补全. 想要了解详细信息, 参见 Google Chrome notes.
enctype
当method
属性值为 post 时
, enctype
是提交form给服务器的内容的 MIME 类型 。可能的取值有:
application/x-www-form-urlencoded
: 如果属性未指定时的默认值。
- multipart/form-data: 这个值用于一个 type 属性设置为 "file" 的 <input> 元素。
text/plain (HTML5)
这个值可以被 <button>或者 <input> 元素中的 formenctype 属性重载(覆盖)。
method
浏览器使用这种 HTTP方式来提交 form. 可能的值有:
post
: 指的是 HTTPPOST 方法; 表单数据会包含在表单体内然后发送给服务器.
get
: 指的是 HTTP GET 方法; 表单数据会附加在action
属性的URI中,并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用,或者表单仅包含ASCII字符时,再使用这种方法吧。
这个值可以被 <button>或者 <input> 元素中的 formmethod 属性重载(覆盖)。
name
这个form的名字。在HTML4中,这个用法不被推荐(作为替代,应该使用id
). HTML5中,一个文档中的多个form当中,name
必须唯一而不仅仅是一个空字符串。
_self
: 在当前HTML4或HTML5文档页面重新加载返回值。这个是默认值。译注:也就是说如果这个文档在一个frame中的话,self是在当前frame(document)中重新加载的,而不是整个页面(window)。
_blank
: 以新的HTML4或HTML5文档窗口加载返回值。
_parent
: 在父级的frame中以HTML4或HTML5文档形式加载返回值,如果没有父级的frame,行为和_self一致。
_top
: 如果是HTML 4文档: 清空当前文档,加载返回内容;HTML5: 在当前文档的最高级内加载返回值,如果没有父级,和_self的行为一致。
iframename
: 返回值在指定frame中加载。
HTML5: 这个值可以被 <button>或者 <input> 元素中的formtarget 属性重载(覆盖)。
示例
HTML 内容
<!-- Simple form which will send a GET request -->
<form action="" method="get">
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<!-- Simple form which will send a POST request -->
<form action="" method="post">
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<!-- Form with fieldset, legend, and label -->
<form action="" method="post">
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
规范
规范 | 状态 | 评论 |
---|---|---|
HTML Living Standard该规范中'<form>'的定义。 | 生活水平 | |
HTML5该规范中'<form>'的定义。 | 建议 | |
HTML 4.01规范该规范中'<form>'的定义。 | 建议 | 初始定义 |
浏览器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
accept | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
accept-charset | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
action | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
autocapitalize | No | No | No | No | No | No |
autocomplete | (Yes)1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
enctype | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
method | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
name | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
novalidate | 1 | (Yes) | 4 | 10 | ? | ? |
target | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
accept | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
accept-charset | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
action | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
autocapitalize | No | No | No | No | No | No | (Yes) |
autocomplete | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
enctype | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
method | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
name | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
novalidate | ? | ? | (Yes) | 4 | (Yes) | ? | ? |
target | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |