<input type="submit">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

submit 类型的 <input> 元素会渲染为按钮。当 click 事件发生时(用户点击按钮是一个典型的点击事件), 用户代理 尝试提交表单到服务器。

展示在按钮标签内字符串
事件 click
支持的公共属性 typevalue
IDL 属性 value
DOM 接口 HTMLInputElement
方法

<input type="submit"> 元素的 value 属性包含一个展示在按钮标签上的字符串。如果没有指定 value 属性,按钮就不会拥有真值。

设置 value 属性

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

省略 value 属性

如果没有指定一个 value 值,按钮将会有一个通过用户代理选择的默认标签值。这个标签可能是“提交”或者“提交查询”,这里有一个默认 label 的提交按钮:

html
<input type="submit" />

额外属性值

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

formaction

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

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

formenctype

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

application/x-www-form-urlencoded

这是默认值,它使用 encodeURI() 之类的算法对文本进行 URL 编码后,以字符串形式发送表单数据。

multipart/form-data

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

text/plain

纯文本;通常仅对调试有用,调试人员可以轻松查看要提交的数据。

如果指定了 formenctype 属性,则该属性的值将覆盖所属表单的 action 属性。

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

formmethod

一个字符串,指示提交表单数据时要使用的 HTTP 方法;此值将覆盖所属表单上给出的任何 method 属性。允许的值为:

get

URL 通过 formactionaction 属性给出的 URL 开始,加上一个问号(“?”)字符,然后加上表单的数据,按照 formenctype 或表单的enctype 属性的描述进行编码。然后使用 HTTP get 请求将这个 URL 发送到服务器。这种方法对于只包含 ASCII 字符且没有副作用的简单表单很有效。这是默认值。

post

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

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> 在表单里创建按钮,请记住:如果 <form> 中只有一个 <button>,那个按钮将被视为“提交”按钮。你应该随时保证指定哪一个是提交按钮的习惯。

一个简单的提交按钮

我们将通过创建含有一个简单的提交按钮的表单来开始:

html
<form>
  <div>
    <label for="example">我们来提交一些文字吧!</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="发送" />
  </div>
</form>

渲染效果如下:

试着输入一些文字到文本字段,然后提交表单。

在提交时,键值对数据将会被发送到服务端。在此列子中,字符串将会是 text=usertext,其中“usertext”是用户输入的字符,它转换为保留的特殊字符。数据提交的方式和位置都由 <form> 的设置决定,参阅发送表单数据文章以获取更多细节。

添加提交的快捷键

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

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

这是添加了 s 访问键的前一个示例:

html
<form>
  <div>
    <label for="example">我们来提交一些文字吧!</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="发送" accesskey="s" />
  </div>
</form>

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

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

禁用和启用提交按钮

要禁用提交按钮,只需在其上指定 disabled 全局属性,就像这样:

html
<input type="submit" value="发送" disabled />

可以在运行时通过简单地将 disabled 设置为 truefalse 来启用和禁用按钮。在 JavaScript 中,这看起来像 btn.disabled = truebtn.disabled = false

备注: 有关启用和禁用按钮的更多想法,请参见 <input type="button">

验证方式

提交按钮不参与约束验证;他们没有用于约束的真实值。

例子

我们在上面提供了一些简单的示例。关于提交按钮,实际上没有什么可说的。有时将这种控件称为“简单按钮”是有原因的。

规范

Specification
HTML
# submit-button-state-(type=submit)

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
type="submit"

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见