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

---
title: <input type="submit">
slug: Web/HTML/Element/Input/submit
tags:
  - HTML
  - Input
  - Input Type
  - submit
  - 元素
  - 按钮
  - 表单
  - 表单按钮
  - 表单输入
translation_of: Web/HTML/Element/input/submit
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong><code>submit</code></strong> 类型的 {{HTMLElement("input")}}  元素被渲染成按钮. 当 {{event("click")}} 事件发生时(用户点击按钮是一个典型的点击事件),  {{Glossary("用户代理")}} 试图提交表单到服务器.</span></p>

<div id="summary-example2">
<pre class="brush: html">&lt;input type="submit" value="发送请求"&gt;</pre>
</div>

<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("值")}}</strong></td>
   <td>{{domxref("DOMString")}} 展示在按钮的标签内</td>
  </tr>
  <tr>
   <td><strong>事件</strong></td>
   <td>{{event("click")}}</td>
  </tr>
  <tr>
   <td><strong>支持的公共属性</strong></td>
   <td>{{htmlattrxref("type", "input")}} and {{htmlattrxref("value", "input")}}</td>
  </tr>
  <tr>
   <td><strong>IDL 属性</strong></td>
   <td><code>value</code></td>
  </tr>
  <tr>
   <td><strong>方法</strong></td>
   <td>无</td>
  </tr>
 </tbody>
</table>

<h2 id="Value">Value</h2>

<p><code>&lt;input type="submit"&gt;</code> 元素的 {{htmlattrxref("value", "input")}} 属性 包含一个展示在按钮标签上的 {{domxref("DOMString")}}，否则按钮没有正确的 value 值。</p>

<div id="summary-example3">
<pre class="brush: html">&lt;input type="submit" value="发送请求"&gt;</pre>
</div>

<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>

<p>如果没有指定一个<code>value</code> 值, 按钮将会有一个通过用户代理选择的默认label。 这个label可能是 "Submit" 或者"Submit Query." 这里有一个默认label的提交按钮:</p>

<div id="summary-example1">
<pre class="brush: html">&lt;input type="submit"&gt;</pre>
</div>

<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>

<h2 id="额外属性值">额外属性值</h2>

<p>除了所有 {{HTMLElement("input")}} 元素共享的属性外，提交 <code>submit</code> 按钮输入还支持以下属性：</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">描述</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("formaction")}}</code></td>
   <td>提交表单数据的URL； 覆盖表单的{{htmlattrxref("action", "form")}} 属性（如果有）</td>
  </tr>
  <tr>
   <td><code>{{anch("formenctype")}}</code></td>
   <td>一个字符串，指定用于表单数据的编码类型</td>
  </tr>
  <tr>
   <td><code>{{anch("formmethod")}}</code></td>
   <td>提交表单时使用的HTTP方法 ({{HTTPMethod("get")}} 或 {{HTTPMethod("post")}}) </td>
  </tr>
  <tr>
   <td><code>{{anch("formnovalidate")}}</code></td>
   <td>一个布尔值，如果存在，则意味着在将数据提交给服务器之前，表单的字段将不受约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）</td>
  </tr>
  <tr>
   <td><code>{{anch("formtarget")}}</code></td>
   <td>提交表单后，将服务器返回的响应加载到 {{Glossary("browsing context")}} 中</td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3>

<p>一个字符串，指示要将数据提交到的URL。 这优先于拥有 {{HTMLElement("input")}} 的 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("action", "form")}} 属性。</p>

<p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p>

<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3>

<p>一个字符串，标识在将表单数据提交到服务器时要使用的编码方法。 有三个允许的值：</p>

<dl>
 <dt><code>application/x-www-form-urlencoded</code></dt>
 <dd>这是默认值，它使用 {{jsxref("encodeURI", "encodeURI()")}} 之类的算法对文本进行URL编码后，以字符串形式发送表单数据。</dd>
 <dt><code>multipart/form-data</code></dt>
 <dd>使用 {{domxref("FormData")}} API来管理数据，从而允许将文件提交到服务器。 如果您的表单包含 {{htmlattrxref("type", "input")}} <code>file</code> (<code><a href="/en-US/docs/Web/HTML/Element/input/file">&lt;input type="file"&gt;</a></code>) 的任何 {{HTMLElement("input")}} 元素，则必须使用此编码类型。</dd>
 <dt><code>text/plain</code></dt>
 <dd>纯文本; 通常仅对调试有用，因此您可以轻松查看要提交的数据。</dd>
</dl>

<p>如果指定，则 <code>formenctype</code> 属性的值将覆盖拥有表单的 {{htmlattrxref("action", "form")}}属性。</p>

<p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p>

<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3>

<p>一个字符串，指示提交表单数据时要使用的HTTP方法； 此值将覆盖拥有表单上给出的任何 {{htmlattrxref("method", "form")}} 属性。 允许的值为：</p>

<dl>
 <dt><code>get</code></dt>
 <dd>通过从 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 通过从 ("?") 字符，然后附加表单数据，按照如下所述进行编码来构造URL 通过 <code>formenctype</code> 或表单的 {{htmlattrxref("enctype", "form")}} 属性。 然后，使用HTTP {{HTTPMethod("get")}}请求将该URL发送到服务器。 此方法适用于仅包含ASCII字符且没有副作用的简单形式。 这是默认值。</dd>
 <dt><code>post</code></dt>
 <dd>表单的数据包含在请求的正文中，该请求的正文使用HTTP {{HTTPMethod("post")}} 发送到由 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 属性指定的URL 请求。 此方法支持复杂的数据和文件附件。</dd>
 <dt><code>dialog</code></dt>
 <dd>此方法用于指示按钮仅关闭与输入关联的对话框，而根本不传输表单数据。</dd>
</dl>

<p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p>

<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3>

<p>布尔属性，如果存在，则指定在提交给服务器之前不应对表单进行验证。 这将覆盖元素拥有表单上的 {{htmlattrxref("novalidate", "form")}} 属性的值。</p>

<p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p>

<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3>

<p>一个字符串，它指定一个名称或关键字，该名称或关键字指示提交表单后在何处显示收到的响应。 该字符串必须是<strong>浏览上下文</strong>的名称 (即选项卡，窗口或 {{HTMLElement("iframe")}}。 此处指定的值将覆盖 {{HTMLElement("form")}} 上拥有此输入的 {{htmlattrxref("target", "form")}} 属性。</p>

<p>除了选项卡，窗口或嵌入式框架的实际名称之外，还可以使用一些特殊的关键字：</p>

<dl>
 <dt><code>_self</code></dt>
 <dd>将响应加载到与包含表单的浏览上下文相同的浏览上下文中。 这将用接收到的数据替换当前文档。 如果未指定，则使用默认值。</dd>
 <dt><code>_blank</code></dt>
 <dd>将响应加载到新的未命名浏览上下文中。 这通常是一个与当前文档相同的窗口中的新选项卡，但是根据 {{Glossary("user agent")}} 的配置可能会有所不同。</dd>
 <dt><code>_parent</code></dt>
 <dd>将响应加载到当前浏览器的父浏览上下文中。 如果没有父上下文，则其行为与 <code>_self</code> 相同。</dd>
 <dt><code>_top</code></dt>
 <dd>将响应加载到顶级浏览上下文中； 这是浏览上下文，它是当前上下文的最高级祖先。 如果当前上下文是最顶层的上下文，则其行为与 <code>_self</code>相同。</dd>
</dl>

<p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p>

<h2 id="使用提交按钮">使用提交按钮</h2>

<p><code>&lt;input type="submit"&gt;</code> 按钮用于提交form表单. 如果你想要创建一个自定义的按钮，然后通过JavaScript自定义按钮的行为，你需要使用 <code><a href="/en-US/docs/Web/HTML/Element/input/button">&lt;input type="button"&gt;</a></code>, 或者使用更好的 {{htmlelement("button")}} 元素.</p>

<p>如果你选择使用<code>&lt;button&gt;</code> 在你的form表单里创建按钮, 请记住:  它只是在{{HTMLElement("form")}}内部的 <code>&lt;button&gt;</code> ，  应该被当作 "submit" 按钮来处理。 所以你应该有一个明确指定哪一个按钮是提交按钮的习惯。</p>

<h3 id="一个简单的提交按钮">一个简单的提交按钮</h3>

<p>我们将通过创建含有一个简单的提交按钮的表单来开始：</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="example"&gt;Let's submit some text&lt;/label&gt;
    &lt;input id="example" type="text" name="text"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="submit" value="Send"&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>

<p>渲染效果如下:</p>

<p>{{EmbedLiveSample("A_simple_submit_button", 650, 100)}}</p>

<p>试着输入一些文字到文本字段, 然后提交表单.</p>

<p>在提交时，键值对数据将会被发送到服务端。在此列子中，字符串将会是 <code>"text=<em>usertext</em>"</code>, "usertext" 是用户输入的字符在转换为被保护的特殊字符. 数据被如何提交、提交到哪都由 <code>&lt;form&gt;的设置决定</code>; 到<a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> 获取更多细节.</p>

<h3 id="添加提交的快捷键">添加提交的快捷键</h3>

<p>键盘快捷键就是使用键盘上的按键, 让用户使用按键或组合按键来触发按钮。 为了在提交按钮上添加键盘快捷键— 就像使用任何有实际意义的 {{HTMLElement("input")}} 一样，您可以使用 {{htmlattrxref("accesskey")}} 全局属性。</p>

<p>在此示例中，将 <kbd>s</kbd> 指定为访问键 (指定为访问键 <kbd>s</kbd> p键加上浏览器/操作系统组合的特定修饰键。为了避免与用户代理自身的键盘快捷键冲突，请使用不同的修饰键 而不是主机上其他快捷方式的访问键。有关更多详细信息，请参见 {{htmlattrxref("accesskey")}}。</p>

<p>这是添加了 <kbd>s</kbd> 访问密钥的上一个示例：</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="example"&gt;Let's submit some text&lt;/label&gt;
    &lt;input id="example" type="text" name="text"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="submit" value="Send"
     accesskey="s"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>例如，在Mac版Firefox中，按 <kbd>Control</kbd>-<kbd>Option</kbd>-<kbd>S</kbd> 会触发“发送”按钮，而Windows上的Chrome使用 <kbd>Alt</kbd>+<kbd>S</kbd>.</p>

<p>{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}}</p>

<p>上面示例的问题是用户将不知道访问密钥是什么！ 尤其如此，因为修饰符通常是非标准的以避免冲突。 在构建网站时，请确保以不干扰网站设计的方式提供此信息（例如，通过提供易于访问的链接来指向有关网站访问密钥的信息）。 向按钮添加工具提示 (使用 {{htmlattrxref("title")}} 属性) 也可以有所帮助，尽管这并不是出于可访问性目的的完整解决方案。</p>

<h3 id="禁用和启用提交按钮">禁用和启用提交按钮</h3>

<p>要禁用提交按钮，只需在其上指定 {{htmlattrxref("disabled")}} 全局属性，如下所示：</p>

<div id="disable-example1">
<pre class="brush: html">&lt;input type="submit" value="Disabled" disabled&gt;</pre>
</div>

<p>您可以在运行时通过简单地将<code>disable</code>设置为<code>true</code>或<code>false</code>来启用和禁用按钮。 在JavaScript中，这看起来像 <code>btn.disabled = true</code> or <code>btn.disabled = false</code>.</p>

<div class="note">
<p>有关启用和禁用按钮的更多想法，请参见 <code><a href="/en-US/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button">&lt;input type="button"&gt;</a></code> 。</p>
</div>

<h2 id="验证方式">验证方式</h2>

<p>提交按钮不参与约束验证； 他们没有约束的真实价值。</p>

<h2 id="例子">例子</h2>

<p>我们在上面提供了一些简单的示例。 关于提交按钮，实际上没有什么可说的。 有时将这种控件称为“简单按钮”是有原因的。</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#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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

<p>{{Compat("html.elements.input.input-submit")}}</p>

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

<ul>
 <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li>
 <li><a href="/en-US/docs/Learn/HTML/Forms_and_buttons">Forms and buttons</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms">Forms (accessibility)</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li>
 <li>{{HTMLElement("button")}} 元素</li>
</ul>