概述
HTML <form>
元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。
可以用 :valid
和:invalid
CSS 伪类 来给一个元素指定样式。
- 内容分类Flow content, palpable content
- 可包含内容Flow content, 但是不包括 <form> 元素
- 标签省略 不允许,开始标签和结束标签都不能省略。
- 允许的父元素 任何接受 flow content 的元素
- DOM接口
HTMLFormElement
属性
这个元素包括一些 全局属性.
accept
HTML 4- 一个逗号分隔的列表,包括服务器能接受的内容类型。
accept-charset
- 一个空格分隔或逗号分隔的列表,这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串“UNKNOWN”。这个字符串指的是,和包含这个form元素的文档相同的编码。
在之前版本的HTML中,不同的字符编码可以用空格或逗号分隔。在HTML5中,只有空格可以允许作为分隔符。 action
- 一个处理这个form信息的程序所在的URL。这个值可以被
<button>
或者<input>
元素中的formaction
属性重载(覆盖)。 autocapitalize
- 这是一个被 iOS Safari Mobile 使用的非标准属性。当用户在一些form的文本后代控件中,输入/编辑一些文本值时,这个属性控制了是否和怎样,对这些文本值首字母大写化。如果
autocapitalize
属性在某个单独的form后代控件被指定的话,那么这个单独的设定会干掉(原先)form范围内的autocapitalize
设定. 这个非不推荐的值从 iOS 5 及其之后可用. 默认值为sentences
. 可以选择的值如下:none
: 完全禁用自动首字母大写.sentences
: 自动对每句话首字母大写.words
: 自动对每个单词首字母大写.characters
: 自动大写所有的字母.on
: 从 iOS 5 以后不被推荐使用.off
: 从 iOS 5 以后不被推荐使用.
autocomplete
HTML5- 用于指示 input 元素是否能够拥有一个默认值,这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的
autocomplete
属性重载(覆盖)。 可能的值有:off
: 在每一个用到的输入域里,用户必须显式的输入一个值,或者document 以它自己的方式提供自动补全;浏览器不会自动补全输入。on
: 浏览器能够根据用户之前在form里输入的值自动补全。
注意: 如果你在一个表单里把
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
: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.get
: 指的是 HTTP GET 方法; 表单数据会附加在 URIaction
属性中并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用,或者表单仅包含ASCII字符时,再使用这种方法吧。
这个值可以被
<button>
或者<input>
元素中的formmethod
属性重载(覆盖)。 name
- 这个form的名字。在HTML4中,这个用法不被推荐(作为替代,应该使用
id
). HTML5中,一个文档中的多个form当中,name必须唯一而不仅仅是一个空字符串。 novalidate
HTML5- 这个布尔类型的属性指示了,当提交时form是否没有被验证。 如果这个属性没有指定 (因此这个 form 是验证通过的),这个默认设置可以被属于这个form的
<button>
或者<input>
元素中的formnovalidate
属性重载(覆盖)。 target
- 一个名字或者说关键字,用来指示在提交表单之后,在哪里显示收到的回复. 在 HTML 4 里, 这是一个用于 frame 的名字/关键字. 在 HTML5 里, 这是一个用于 browsing context 浏览器上下文 的名字/关键字 (举例来说, 标签页tab, 窗口window, or 或者行内 frame). 如下的关键字含有特别的含义:
_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
属性重载(覆盖)。
例子
<!-- 一个简单的表单,这个表单会发送一个 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, 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>
Title
规范
浏览器兼容性
10 |
autocomplete
参见
- 还有其他的一些元素也用于创建表单: