<input type="submit">

值

<input type="submit"> 元素的 value 属性包含一个字符串，该字符串显示为按钮的标签。除此之外，按钮没有真正的值。value 提供了按钮的可访问描述。

设置 value 属性

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

省略 value 属性

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

<input type="submit" />

附加属性

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

formaction

一个字符串，表示提交数据的 URL。这优先于拥有 <input> 的 <form> 元素上的 action 属性。

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

formenctype

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

application/x-www-form-urlencoded

这是默认值，它使用 encodeURI() 等算法对文本进行百分比编码后，将表单数据作为字符串发送。

multipart/form-data

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

text/plain

纯文本；主要只用于调试，以便你可以轻松查看要提交的数据。

如果指定，formenctype 属性的值会覆盖拥有表单的 enctype 属性。

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

formmethod

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

get

通过以 formaction 或 action 属性给定的 URL 为起点，附加一个问号（“?”）字符，然后附加表单数据（按照 formenctype 或表单的 enctype 属性所述进行编码），从而构造一个 URL。然后使用 HTTP get 请求将此 URL 发送到服务器。此方法适用于仅包含 ASCII 字符且没有副作用的表单。这是默认值。

post

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

dialog

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

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

formnovalidate

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

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

formtarget

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

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

_self

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

_blank

将响应加载到一个新的、未命名的浏览上下文中。这通常是与当前文档在同一窗口中的新选项卡，但可能会因 用户代理的配置而异。

_parent

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

_top

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

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

使用提交按钮

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

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

一个基本的提交按钮

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

<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>

渲染效果如下：

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

提交后，数据名称/值对会发送到服务器。在此实例中，字符串将是 text=user-text，其中“user-text”是用户输入的文本，经过编码以保留特殊字符。数据的提交位置和方式取决于 <form> 的配置；有关更多详细信息，请参阅发送表单数据。

为提交按钮添加键盘快捷键

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

在此示例中，s 被指定为访问键（你需要按下 s 加上适用于你的浏览器/操作系统组合的特定修改键）。为了避免与用户代理自身的键盘快捷键冲突，访问键使用的修改键与主机计算机上其他快捷键的修改键不同。有关更多详细信息，请参阅 accesskey。

这是添加了 s 访问键的先前示例：

<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。

上述示例的问题在于用户不知道访问键是什么！尤其是因为修改键通常是非标准的，以避免冲突。在构建网站时，请务必以不干扰网站设计的方式提供此信息（例如，提供一个易于访问的链接，指向有关网站访问键的信息）。为按钮添加工具提示（使用 title 属性）也有帮助，尽管它不是一个完整的可访问性解决方案。

禁用和启用提交按钮

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

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

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

验证

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

示例

我们在上面包含了基本示例。关于提交按钮真的没有什么可说的了。这种控件有时被称为“简单按钮”是有原因的。

技术摘要

规范

浏览器兼容性

另见

• <input> 及其实现的 HTMLInputElement 接口。
• 表单和按钮
• HTML 表单
• <button> 元素