<input type="submit">

¥Value

<input type="submit"> 元素的 value 属性包含一个显示为按钮标签的字符串。否则按钮就没有真正的值。value 为按钮提供 accessible description。

¥An <input type="submit"> element's value attribute contains a string which is displayed as the button's label. Buttons do not have a true value otherwise. The value provides the accessible description for the button.

¥Setting the value attribute

<input type="submit" value="Send Request" />

¥Omitting the value attribute

如果你不指定 value，按钮将具有由用户代理选择的默认标签。该标签可能类似于 "提交" 或 "提交查询。" 以下是浏览器中带有默认标签的提交按钮的示例：

¥If you don't specify a value, the button will have a default label, chosen by the user agent. This label is likely to be something along the lines of "Submit" or "Submit Query." Here's an example of a submit button with a default label in your browser:

<input type="submit" />

¥Additional attributes

除了所有 <input> 元素共享的属性外，submit 按钮输入还支持以下属性。

¥In addition to the attributes shared by all <input> elements, submit button inputs support the following attributes.

指示将数据提交到的 URL 的字符串。这优先于拥有 <input> 的 <form> 元素上的 action 属性。

¥A string indicating the URL to which to submit the data. This takes precedence over the action attribute on the <form> element that owns the <input>.

此属性也可用于 <input type="image"> 和 <button> 元素。

¥This attribute is also available on <input type="image"> and <button> elements.

标识将表单数据提交到服务器时使用的编码方法的字符串。共有三个允许值：

¥A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:

application/x-www-form-urlencoded

这是默认值，使用 encodeURI() 等算法在 URL 编码 文本之后将表单数据作为字符串发送。

multipart/form-data

使用 FormData API 管理数据，允许将文件提交到服务器。如果你的表单包含 type file (<input type="file">) 的任何 <input> 元素，则必须使用此编码类型。

text/plain

纯文本;主要仅用于调试，因此你可以轻松查看要提交的数据。

如果指定，formenctype 属性的值将覆盖所属表单的 action 属性。

¥If specified, the value of the formenctype attribute overrides the owning form's action attribute.

此属性也可用于 <input type="image"> 和 <button> 元素。

¥This attribute is also available on <input type="image"> and <button> elements.

一个字符串，指示提交表单数据时使用的 HTTP 方法；该值会覆盖所属表单上给定的任何 method 属性。允许的值为：

¥A string indicating the HTTP method to use when submitting the form's data; this value overrides any method attribute given on the owning form. Permitted values are:

get

URL 的构造方法是，从 formaction 或 action 属性给定的 URL 开始，附加问号 ("?") 字符，然后附加按 formenctype 或表单的 enctype 属性所述编码的表单数据。然后使用 HTTP get 请求将该 URL 发送到服务器。此方法适用于仅包含 ASCII 个字符的简单表单，并且没有副作用。这是默认值。

post

表单的数据包含在使用 HTTP post 方法发送到 formaction 或 action 属性指定的 URL 的请求正文中。此方法支持复杂的数据和文件附件。

dialog

此方法用于指示按钮关闭与输入关联的对话框，并且根本不传输表单数据。

此属性也可用于 <input type="image"> 和 <button> 元素。

¥This attribute is also available on <input type="image"> and <button> elements.

布尔属性，如果存在，则指定在提交到服务器之前不应验证表单。这会覆盖元素所属表单上 novalidate 属性的值。

¥A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element's owning form.

此属性也可用于 <input type="image"> 和 <button> 元素。

¥This attribute is also available on <input type="image"> and <button> elements.

指定名称或关键字的字符串，指示在何处显示提交表单后收到的响应。该字符串必须是浏览上下文的名称（即选项卡、窗口或 <iframe>）。此处指定的值将覆盖拥有此输入的 <form> 上的 target 属性指定的任何目标。

¥A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a browsing context (that is, a tab, window, or <iframe>). A value specified here overrides any target given by the target attribute on the <form> that owns this input.

除了选项卡、窗口或内联框架的实际名称之外，还可以使用一些特殊关键字：

¥In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:

_self

将响应加载到与包含表单的浏览上下文相同的浏览上下文中。这将用接收到的数据替换当前文档。如果未指定，则这是使用的默认值。

_blank

将响应加载到新的、未命名的浏览上下文中。这通常是与当前文档位于同一窗口中的新选项卡，但可能会有所不同，具体取决于 user agent 的配置。

_parent

将响应加载到当前浏览上下文的父浏览上下文中。如果没有父上下文，则其行为与 _self 相同。

_top

将响应加载到顶层浏览上下文中；这是浏览上下文，是当前上下文的最顶层祖级。如果当前上下文是最顶层上下文，则其行为与 _self 相同。

此属性也可用于 <input type="image"> 和 <button> 元素。

¥This attribute is also available on <input type="image"> and <button> elements.

¥Using submit buttons

<input type="submit"> 按钮用于提交表单。如果你想创建自定义按钮，然后使用 JavaScript 自定义行为，则需要使用 <input type="button">，或者更好的是，使用 <button> 元素。

¥<input type="submit"> buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use <input type="button">, or better still, a <button> element.

如果你选择使用 <button> 元素在表单中创建按钮，请记住这一点：如果 <button> 在 <form> 内，则该按钮将被视为 "submit" 按钮。所以你应该养成明确指定哪个按钮是提交按钮的习惯。

¥If you choose to use <button> elements to create the buttons in your form, keep this in mind: If the <button> is inside a <form>, that button will be treated as the "submit" button. So you should be in the habit of expressly specifying which button is the submit button.

¥A simple submit button

我们将首先创建一个带有简单提交按钮的表单：

¥We'll begin by creating a form with a simple submit button:

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Send" />
  </div>
</form>

呈现如下：

¥This renders like so:

尝试在文本字段中输入一些文本，然后提交表单。

¥Try entering some text into the text field, and then submitting the form.

提交后，数据名称/值对将发送到服务器。在本例中，字符串将为 text=usertext，其中 "usertext" 是用户输入的文本，经过编码以保留特殊字符。数据提交的地点和方式取决于 <form> 的配置；详细信息请参见 发送表单数据。

¥Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be text=usertext, where "usertext" is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the <form>; see Sending form data for more details.

¥Adding a keyboard shortcut to a submit button

键盘快捷键也称为访问键和键盘等效项，允许用户使用键盘上的一个键或多个键组合来触发按钮。要向提交按钮添加键盘快捷键（就像使用任何有意义的 <input> 一样），你可以使用 accesskey 全局属性。

¥Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.

在此示例中，s 被指定为访问键（你需要按 s 加上适合你的浏览器/操作系统组合的特定修饰键）。为了避免与用户代理自己的键盘快捷键发生冲突，访问键与主机上的其他快捷键使用不同的修饰键。详情请参阅 accesskey。

¥In this example, s is specified as the access key (you'll need to press s plus the particular modifier keys for your browser/OS combination). In order to avoid conflicts with the user agent's own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See accesskey for further details.

这是添加了 s 访问密钥的前面示例：

¥Here's the previous example with the s access key added:

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Send" accesskey="s" />
  </div>
</form>

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

¥For example, in Firefox for Mac, pressing Control-Option-S triggers the Send button, while Chrome on Windows uses Alt+S.

上面例子的问题是用户不知道访问密钥是什么！由于修饰符通常是非标准的以避免冲突，因此尤其如此。构建站点时，请确保以不干扰站点设计的方式提供此信息（例如，通过提供易于访问的链接来指向有关站点访问密钥的信息）。向按钮添加工具提示（使用 title 属性）也有帮助，尽管这并不是一个用于辅助功能的完整解决方案。

¥The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it's not a complete solution for accessibility purposes.

¥Disabling and enabling a submit button

要禁用提交按钮，请指定其 disabled 属性，如下所示：

¥To disable a submit button, specify the disabled attribute on it, like so:

<input type="submit" value="Send" disabled />

你可以通过将 disabled 设置为 true 或 false 在运行时启用和禁用按钮；在 JavaScript 中，这看起来像 btn.disabled = true 或 btn.disabled = false。

¥You can enable and disable buttons at run time by setting disabled to true or false; in JavaScript this looks like btn.disabled = true or btn.disabled = false.

注意：有关启用和禁用按钮的更多想法，请参阅 <input type="button"> 页面。

¥Note: See the <input type="button"> page for more ideas about enabling and disabling buttons.

¥Validation

提交按钮不参与约束验证；它们没有真正的价值需要受到限制。

¥Submit buttons don't participate in constraint validation; they have no real value to be constrained.

¥Examples

我们在上面提供了简单的示例。关于提交按钮确实没有什么可说的。这种控件有时被称为 "简单的按钮。" 是有原因的

¥We've included simple examples above. There isn't really anything more to say about submit buttons. There's a reason this kind of control is sometimes called a "simple button."

¥Technical Summary

¥See also

• <input> 和实现它的 HTMLInputElement 接口。
• 表格和按钮
• HTML 表单
• <button> 元素
• CSS 属性的兼容性