path: root/files/zh-cn/web/html/element/form/index.html

---
title: form
slug: Web/HTML/Element/form
tags:
  - Forms
  - HTML
  - HTML表单
  - Web
  - 元素
  - 参考
  - 表单
translation_of: Web/HTML/Element/form
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;form&gt;</code> 元素</strong>表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div>

<p>可以用 {{cssxref(':valid')}} 和 {{cssxref(':invalid')}} CSS 伪类来设置 <code>&lt;form&gt;</code> 元素的样式，此时样式的表现取决于表单中的 {{domxref("HTMLFormElement.elements", "elements")}} 是否有效。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容类别</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, palpable content</td>
  </tr>
  <tr>
   <th scope="row"><dfn>可包含内容</dfn></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, but not containing <code>&lt;form&gt;</code> elements</td>
  </tr>
  <tr>
   <th scope="row"><dfn>标签省略</dfn></th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">允许的父级元素</th>
   <td>可以是HTML的<a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">任何标签</a></td>
  </tr>
  <tr>
   <th scope="row">Implicit ARIA role</th>
   <td><code><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></code> if the form has an <a href="https://www.w3.org/TR/accname-1.1/#dfn-accessible-name">accessible name</a>, otherwise <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td><code><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></code>, {{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{domxref("HTMLFormElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>此元素拥有 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p>

<dl>
 <dt>{{htmlattrdef("accept")}}{{obsolete_inline}}</dt>
 <dd>一个逗号分隔的列表，包括服务器能接受的内容类型。
 <div class="note"><strong>此属性已在 HTML5 中被移除并且不再被使用。</strong>作为替代，可以使用 <code>&lt;input type=file&gt;</code> 元素中的<span class="st"> {{htmlattrxref("accept", "input")}}</span> 属性。</div>
 </dd>
 <dt>{{htmlattrdef("accept-charset")}}</dt>
 <dd>一个空格分隔或逗号分隔的列表，此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 <code>"UNKNOWN"</code>。此字符串指的是，和包含此表单元素的文档相同的编码。<br>
 在之前版本的 HTML 中，不同的字符编码可以用空格或逗号分隔。在 HTML5 中，只有空格可以允许作为分隔符。</dd>
 <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
 <dd>这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中，输入/编辑一些文本值时，此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 <code>autocapitalize</code> 属性在某个单独的表单后代控件被指定的话，那么此单独的设定会覆盖原来表单范围内的 <code>autocapitalize</code> 设定。默认值为 <code>sentences</code>。可以选择的值如下：
 <ul>
  <li><code>none</code>：完全禁用自动首字母大写。</li>
  <li><code>sentences</code>：自动对每句话首字母大写。</li>
  <li><code>words</code>：自动对每个单词首字母大写。</li>
  <li><code>characters</code>：自动大写所有的字母。</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("autocomplete")}}</dt>
 <dd>用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 <code>autocomplete</code> 属性覆盖。 可能的值有：
 <ul>
  <li><code>off</code>：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见 <a href="/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#禁用自动填充">自动填充属性和登录</a>）</li>
  <li><code>on</code>：浏览器可自动补全条目</li>
 </ul>


 </dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>表单的名称。HTML 4中不推荐（应使用 <code>id</code>）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。</dd>
 <dt>{{htmlattrdef("rel")}}</dt>
 <dd>根据 value 创建一个超链接或Creates a hyperlink or annotation depending on the value, see the <a href="/zh-CN/docs/Web/HTML/Attributes/rel">{{htmlattrdef("rel")}}</a> attribute for details.</dd>
</dl>

<h3 id="关于提交表单的属性">关于提交表单的属性</h3>

<p>下列属性控制提交表单时的行为。</p>

<dl>
 <dt>{{htmlattrdef("action")}}</dt>
 <dd>处理表单提交的 URL。这个值可被 {{HTMLElement("button")}}、<code><a href="/zh-CN/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 元素上的 {{htmlattrxref("formaction", "button")}} 属性覆盖。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("enctype")}}</dt>
 <dd>当 <code>method</code> 属性值为 <code>post</code> 时，<code>enctype</code> 就是将表单的内容提交给服务器的 <a href="http://en.wikipedia.org/wiki/Mime_type">MIME 类型</a> 。可能的取值有：
 <ul>
  <li><code>application/x-www-form-urlencoded</code>：未指定属性时的默认值。</li>
  <li><code>multipart/form-data</code>：当表单包含 <code>type=file</code> 的 {{HTMLElement("input")}} 元素时使用此值。</li>
  <li><code>text/plain</code>：出现于 HTML5，用于调试。</li>
 </ul>

 <p>这个值可被 {{HTMLElement("button")}}、<code><a href="/zh-CN/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 元素上的 {{htmlattrxref("formenctype", "button")}} 属性覆盖。</p>
 </dd>
 <dt>{{htmlattrdef("method")}}</dt>
 <dd>浏览器使用这种 <a href="/en-US/docs/HTTP">HTTP</a> 方式来提交 表单. 可能的值有：
 <ul>
  <li><code>post</code>：指的是 HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST 方法</a>；表单数据会包含在表单体内然后发送给服务器.</li>
  <li><code>get</code>：指的是 HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET 方法</a>；表单数据会附加在 <code>action</code> 属性的 URL 中，并以 '?' 作为分隔符，<a href="/zh-CN/docs/Glossary/Idempotent">没有副作用</a> 时使用这个方法。</li>
  <li><code>dialog</code>：如果表单在 {{HTMLElement("dialog")}} 元素中，提交时关闭对话框。</li>
 </ul>

 <p>此值可以被 {{HTMLElement("button")}}、<code><a href="/zh-CN/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 元素中的 {{htmlattrxref("formmethod", "button")}} 属性覆盖。</p>
 </dd>
 <dt>{{htmlattrdef("novalidate")}}</dt>
 <dd>此布尔值属性表示提交表单时不需要验证表单。 如果没有声明该属性 （因此表单需要通过验证）。该属性可以被表单中的 {{HTMLElement("button")}}、<code><a href="/zh-CN/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 元素中的 {{htmlattrxref("formnovalidate", "button")}} 属性覆盖。</dd>
 <dt>{{htmlattrdef("target")}}</dt>
 <dd>表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中, 这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个<em>浏览上下文</em> 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：
 <ul>
  <li><code>_self</code>：默认值。在相同浏览上下文中加载。</li>
  <li><code>_blank</code>：在新的未命名的浏览上下文中加载。</li>
  <li><code>_parent</code>：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。</li>
  <li><code>_top</code>：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。</li>
 </ul>

 <p>此值可以被 {{HTMLElement("button")}}、 <code><a href="/zh-CN/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 元素中的 {{htmlattrxref("formtarget", "button")}} 属性覆盖。</p>
 </dd>
</dl>

<h2 id="Examples">示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;!-- Form which will send a GET request to the current URL --&gt;
&lt;form&gt;
  &lt;label&gt;Name:
    &lt;input name="submitted-name" autocomplete="name"&gt;
  &lt;/label&gt;
  &lt;button&gt;Save&lt;/button&gt;
&lt;/form&gt;

&lt;!-- Form which will send a POST request to the current URL --&gt;
&lt;form method="post"&gt;
  &lt;label&gt;Name:
    &lt;input name="submitted-name" autocomplete="name"&gt;
  &lt;/label&gt;
  &lt;button&gt;Save&lt;/button&gt;
&lt;/form&gt;

&lt;!-- Form with fieldset, legend, and label --&gt;
&lt;form method="post"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Title&lt;/legend&gt;
    &lt;label&gt;&lt;input type="radio" name="radio"&gt; Select me&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Examples', '100%', 110) }}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '&lt;form&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '&lt;form&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '&lt;form&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("html.elements.form")}}</p>

<h3 id="Google_Chrome_备注"><label>Google Chrome 备注</label></h3>

<p>对于自动完成的请求，Google Chrome UI 是不一样的，取决于在 <code>input</code> 元素及其表单上，<strong><code>autocomplete</code></strong> 是否设为 <code>off</code> 。特别是，如果表单的 <code>autocomplete</code> 设为 <code>off</code> ，并且它的输入元素的 <code>autocomplete</code> 字段<strong>没有</strong>设置，如果用户请求该输入元素的自动填充建议，Chrome 就可能展示一个消息，“自动完成已关闭”。另一方面，如果表单和输入元素的 <code>autocomplete</code> 都设为 <code>off</code>，浏览器就不会展示此消息。出于此原因，你应该将每个拥有自定义自动完成的输入元素的 <code>autocomplete</code> 设为 <code>off</code> 。</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML 表单指南</a></li>
 <li>还有其他的一些元素也用于创建表单：{{HTMLElement("button")}}、{{HTMLElement("datalist")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("input")}},{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("legend")}}、{{HTMLElement("meter")}}、{{HTMLElement("optgroup")}}、{{HTMLElement("option")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}</li>
 <li>Getting a list of the elements in the form: {{domxref("HTMLFormElement.elements")}}</li>
 <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA: Form role</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">ARIA: Search role</a></li>
</ul>