<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 |
支持的公共属性 | type 和 value |
IDL 属性 | value |
DOM 接口 | HTMLInputElement |
方法 | 无 |
值
<input type="submit">
元素的 value
属性包含一个展示在按钮标签上的字符串。如果没有指定 value 属性,按钮就不会拥有真值。
设置 value 属性
<input type="submit" value="Send Request" />
省略 value 属性
如果没有指定一个 value
值,按钮将会有一个通过用户代理选择的默认标签值。这个标签可能是“提交”或者“提交查询”,这里有一个默认 label 的提交按钮:
<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 通过
formaction
或action
属性给出的 URL 开始,加上一个问号(“?”)字符,然后加上表单的数据,按照formenctype
或表单的enctype
属性的描述进行编码。然后使用 HTTPget
请求将这个 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
-
将响应加载到新的未命名浏览上下文中。这通常是一个与当前文档相同的窗口中的新选项卡,但是根据用户代理的配置可能会有所不同。
_parent
-
将响应加载到当前浏览器的父浏览上下文中。如果没有父上下文,则其行为与
_self
相同。 _top
-
将响应加载到顶级浏览上下文中;这是浏览上下文,它是当前上下文的最高级祖先。如果当前上下文是最顶层的上下文,则其行为与
_self
相同。
此属性在 <input type="image">
元素和 <button>
元素上也可用。
使用提交按钮
<input type="submit">
按钮用于提交表单。如果你想要创建一个自定义的按钮,并通过 JavaScript 自定义按钮的行为,你需要使用 <input type="button">
,或者,使用更优解的 <button>
元素。
如果你选择使用 <button>
在表单里创建按钮,请记住:如果 <form>
中只有一个 <button>
,那个按钮将被视为“提交”按钮。你应该随时保证指定哪一个是提交按钮的习惯。
一个简单的提交按钮
我们将通过创建含有一个简单的提交按钮的表单来开始:
<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 访问键的前一个示例:
<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
全局属性,就像这样:
<input type="submit" value="发送" disabled />
可以在运行时通过简单地将 disabled
设置为 true
或 false
来启用和禁用按钮。在 JavaScript 中,这看起来像 btn.disabled = true
或 btn.disabled = false
。
备注:
有关启用和禁用按钮的更多想法,请参见 <input type="button">
。
验证方式
提交按钮不参与约束验证;他们没有用于约束的真实值。
例子
我们在上面提供了一些简单的示例。关于提交按钮,实际上没有什么可说的。有时将这种控件称为“简单按钮”是有原因的。
规范
Specification |
---|
HTML Standard # submit-button-state-(type=submit) |
浏览器兼容性
BCD tables only load in the browser
参见
<input>
元素和实现它的HTMLInputElement
接口。- 表单与按钮
- HTML 表单
<button>
元素- CSS 属性兼容性列表