表单 | FORM

HTML

元素表示了文档中的一个区域,此区域包含有交互控制元件,用来向 Web 服务器提交信息。

可以用 :valid 和 :invalid CSS 伪类来按照表单是否正确填涂来给 元素指定样式。

属性

此元素拥有 全局属性。

accept-charset

一个空格分隔或逗号分隔的列表,此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 "UNKNOWN"。此字符串指的是,和包含此表单元素的文档相同的编码。 在之前版本的 HTML 中,不同的字符编码可以用空格或逗号分隔。在 HTML5 中,只有空格可以允许作为分隔符。

action

一个处理此表单信息的程序所在的URL。此值可以被 <button> 或者 <input> 元素中的 formaction 属性覆盖。

autocomplete

用于指示 input 元素是否能够拥有一个默认值,此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。 可能的值有: off:在每一个用到的输入域里,用户必须显式的输入一个值,或者document 以它自己的方式提供自动补全;浏览器不会自动补全输入。 on:浏览器能够根据用户之前在表单里输入的值自动补全。

注意: 如果你在一个表单里把 autocomplete 设置成 off 是因为当前文档提供了它独有的自动补全,那么你也应该把此表单里每一个 input 元素的 autocomplete 设成 off 来允许文档接管自动补全。

enctype

当 method 属性值为 post 时,enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有: application/x-www-form-urlencoded:未指定属性时的默认值。 multipart/form-data:此值用于一个 type 属性设置为 "file" 的 <input> 元素。 text/plain:(HTML5) 此值可以被 <button> 或者 <input> 元素中的 formenctype 属性覆盖。

method

浏览器使用这种 HTTP 方式来提交 表单. 可能的值有: post:指的是 HTTP POST 方法;表单数据会包含在表单体内然后发送给服务器. get:指的是 HTTP GET 方法;表单数据会附加在 action 属性的URI中,并以 '?' 作为分隔符,然后这样得到的 URI 再发送给服务器。如果这样做(数据暴露在 URI 中)没什么副作用,或者表单仅包含ASCII字符时,再考虑使用这种方法吧。

此值可以被 <button><input type="submit"><input type="image"> 元素中的 formmethod 属性覆盖。

name

表单的名称。在 HTML 4 中,此用法不被推荐(作为替代,应该使用id)。HTML5中,一个文档中的多个表单当中,name必须唯一而不仅仅是一个空字符串。

novalidate

此布尔类型的属性指的是提交时表单是否处于未验证状态。 如果此属性没有指定 (因此此 表单 是验证通过的),此默认设置可以被属于此表单的 <button><input type="submit"><input type="image"> 元素中的 formnovalidate 属性覆盖。

target

一个名字或者说关键字,用来指示在提交表单之后,在哪里显示收到的回复. 在 HTML 4 里, 这是一个用于 frame 的名字/关键字. 在 HTML5 里,这是一个用于 browsing context 浏览器上下文 的名字/关键字(举例来说,标签页,窗口,或者行内 frame)。如下的关键字含有特别的含义:

  1. _self:在当前 HTML 4 或 HTML5 文档页面重新加载返回值。是默认值。译注:也就是说,如果此文档在一个frame中的话,self是在当前frame(document)中重新加载的,而不是整个页面(window)。
  2. _blank:以新的 HTML 4 或 HTML5 文档窗口加载返回值。
  3. _parent:在父级的 frame 中以 HTML 4 或 HTML 5 文档形式加载返回值,如果没有父级的frame,行为和_self一致。
  4. _top:如果是 HTML 4 文档:清空当前文档,加载返回内容;HTML5:在当前文档的最高级内加载返回值,如果没有父级,和_self的行为一致。 iframename:返回值在指定 <iframe> 中显示。

HTML5:此值可以被 <button><input type="submit"><input type="image"> 元素中的 formtarget 属性覆盖。

例子

<!-- 一个简单的表单,会发送一个 GET 请求 -->
<form action="" method="get">
  <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>