<input type="submit">

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

<input type="submit" value="发送请求">

DOMString 展示在按钮的标签内
事件 click
支持的公共属性 type and value
IDL 属性 value
方法

Value

<input type="submit"> 元素的 value 属性 包含一个展示在按钮标签上的 DOMString,否则按钮没有正确的 value 值。

<input type="submit" value="发送请求">

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

<input type="submit">

额外属性值

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

属性 描述
formaction 提交表单数据的URL; 覆盖表单的action 属性(如果有)
formenctype 一个字符串,指定用于表单数据的编码类型
formmethod 提交表单时使用的HTTP方法 (getpost
formnovalidate 一个布尔值,如果存在,则意味着在将数据提交给服务器之前,表单的字段将不受约束验证(constraint validation
formtarget 提交表单后,将服务器返回的响应加载到 browsing context

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

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

formnovalidate

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

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

formtarget

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

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

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

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

使用提交按钮

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

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

一个简单的提交按钮

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

<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=usertext", "usertext" 是用户输入的字符在转换为被保护的特殊字符. 数据被如何提交、提交到哪都由 <form>的设置决定; 到Sending form data 获取更多细节.

添加提交的快捷键

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

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

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

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

验证方式

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

例子

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

规范

规范 状态 备注
HTML Living Standard
<input type="submit">
Living Standard
HTML5
<input type="submit">
Recommendation

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
type="submit"Chrome Full support 1Edge Full support YesFirefox Full support 1
Notes
Full support 1
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.</button>
IE Full support YesOpera Full support YesSafari Full support 1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.</button>
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

参见