HTML <button> 元素

HTML <button> 元素 表示一个可点击的按钮。

以下代码展示了一个按钮：

<button type="button">点我!</button>

尝试一下 »

特性

内容类别 流式内容，短语内容，交互内容，可列举的，可标签的 和 可提交的 表单相关内容元素，可触知内容。
允许内容 短语内容。
遗漏标签 不允许，开始标签和结束标签都不能省略。
允许的父级元素 任何接受短语内容的元素。
允许的 ARIA 角色 checkbox, link, menuitem, menuitemcheckbox, menuitemradio, radio, switch, tab
DOM 接口 Button 对象

属性

该元素包含了 全局属性。

HTML5 中的新属性：autofocus、form、formaction、formenctype、formmethod、formnovalidate 以及 formtarget。

autofocus HTML5

一个布尔值的元素属性。用于指定当页面加载时，该按钮应当自动获得输入焦点。除非是用户重写，例如通过其他控件键入，才会失去焦点。一个文档中，只能有一个表单相关的元素可以指定该属性。

autocomplate

该属性用在 <button> 上还未标准化，是 Fireofx 特有的。不像其它浏览器，Firefox默认在页面跳转时，会保留 button 的动态禁用状态（Firefox persists the dynamic disabled state）。设置该属性为 off （即 autocomplete="off"）可以关闭此特性。参见 bug 654072。可选值有：

  • on
  • off

disabled

一个布尔值的元素属性。表示用户不能和该按钮交互。如果该属性未设置，那么按钮继承自它的父元素的设置，例如 <fieldset>；如果父元素没有设置 disabled 属性，那么按钮是启用的。

form HTML5

form 属性表示该按钮所关联的表单元素 id。该属性的值必须是同一个文档中的 <form> 的 id 属性。如果该属性未指定，且 <button> 存在上级 <form> 元素，则关联到该元素。通过该属性，<button> 元素可以关联到一个文档中的任意位置的 <form> 元素，而不仅仅是作为 <form> 元素的后代。

formaction HTML5

表示该按钮提交时，接收表单信息的 URI。如果指定了，将会覆盖按钮所属表单的 action 属性。

formenctype HTML5

如果该按钮是一个提交按钮，该属性指定了在向服务器发送表单数据之前如何对其进行编码。该属性与 type="submit" 配合使用。可选值有：

  • application/x-www-form-urlencoded：默认值。在发送前对所有字符进行编码。
  • multipart/form-data：如果 <input> 元素的 type 属性设置为 file type 时，使用该值。
  • text/plain：将空格转换为 "+" 符号，但不编码特殊字符。

如果指定了该属性，则覆盖掉按钮所属表单的 enctype 属性。

formmethod HTML5

如果按钮的类型是 submit，则该属性指定浏览器用于提交表单的 HTTP 方法。可选值有：

  • post: 表单中的数据包含在表单的正文中，并发送到服务器。
  • get: 表单中的数据以 “?” 作为分隔符，附加到 form 属性URI中，并将生成的URI发送到服务器。当表单没有副作用并且只包含ASCII字符时可以使用此方法。

如果指定了，该属性将覆盖按钮的表单所有者的 method 属性。

formnovalidate HTML5

一个布尔值的元素属性。如果按钮的类型是 submit，则此布尔属性指定在提交表单时不会验证该表单。如果指定了此属性，它将覆盖按钮的表单所有者的 novalidate 属性。

formtarget HTML5

如果按钮的类型是 submit，则此属性是一个名称或关键字，指示在提交表单后，在何处显示收到的响应（即 action URL的返回内容）。这是一个 浏览上下文（例如，标签页，窗口或内联框架）的名称或关键字。如果指定了此属性，它将覆盖按钮的表单所有者的 target 属性。以下关键字有特殊含义：

  • _self：将响应加载到当前的浏览上下文中。未指定时此值为默认值。
  • _blank：将响应加载到新的未命名浏览上下文中。
  • _parent：将响应加载到当前的父浏览上下文中。如果没有父级，则此选项的行为方式与 _self 相同。
  • _top：将响应加载到顶级浏览上下文（即，当前浏览上下文的祖先，且没有父级）。如果没有父级，则此选项的行为方式与 _self 相同。
  • framename：将响应加载到指定的 <iframe> 中。

name

一个字符串。按钮的名称，提交时作为表单的数据一部分的名称。

type

规定按钮的类型。可选值有：

  • submit：该按钮表示点击后将表单数据提交到服务器。未指定属性时的默认值。或是将属性动态更改为空值或无效值时，也变为该默认值。
  • reset：该按钮将所有控件重置为其初始值。
  • button：该按钮没有默认行为。它可以用于按钮的事件发生时（如点击），触发关联的客户端的脚本。
  • menu：该按钮打开一个由它指定的 <menu> 元素定义的弹出菜单。

value

一个字符串。规定按钮的初始值。它定义了表单提交的数据中，按钮相关联的值。当表单中提交时，这个值便以参数的形式被递送至服务器。可由脚本进行修改。

事件属性

<button> 标签支持 HTML 的事件属性。

注意

给 <button> 元素加样式，要比 <input> 容易得多。你可以添加内联的 HTML 内容（如 <em>, <strong>，甚至是 <img>），还可以使用 :after 和 :before 伪元素来实现复杂的效果，而 <input> 只能设置一个文本的值，这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

IE7 有一个 bug，当使用 <button type="submit" name="myButton" value="foo">Click me</button> 提交表单时，发送的 POST 数据将是 myButton=Click me 而不是 myButton=foo。
IE6 有一个更糟糕的 bug，当使用一个按钮提交表单时，所有的按钮都会出现和 IE7 相同的 bug。
这个 bug 在 IE8 已经被修复了。
如需兼容旧版浏览器，可使用 <input type="button"> 在 HTML 表单中创建按钮。

为了无障碍考虑，Firefox 会给获得焦点的按钮上加上一个小的点状边框。这个边框是通过浏览器样式表的 CSS 声明的，但是如果需要添加自己的焦点样式，可以使用 button<a href="/css-ref/prop-::-moz-focus-inner.html" title=" "><code>::-moz-focus-inner</code></a> { } 来重写。

不像其它浏览器，Firefox默认在页面跳转时，会保留 button 的动态禁用状态（Firefox persists the dynamic disabled state）。设置 autocomplete 属性的值为 off 可以关闭此特性。参见 bug 654072。

Firefox <35 for Android 会在所有按钮上的 background-image 设置默认的渐变（参见 bug 763671）。可以设置 background-image: none 来禁用该效果。

点击和焦点

在不同的浏览器和系统中，默认情况下，点击一个 <button> 是否会获得焦点的结果是不一样的。设置了 type="button" 和 type="submit" 的 <input> 元素获取焦点结果与 <button> 一致。

在桌面浏览器中，点击 <button> 是否能获得焦点?

桌面浏览器 Windows 8.1 OS X 10.9
Firefox 30.0 是 否（即使设置了 tabindex）
Chrome 35 是 是
Safari 7.0.5 N/A 否（即使设置了 tabindex）
Internet Explorer 11 是 N/A
Presto (Opera 12) 是 是

在移动桌面浏览器中，点击 <button> 是否能获得焦点?

移动浏览器 iOS 7.1.2 Android 4.4.4
Safari Mobile 否（即使设置了 tabindex） N/A
Chrome 35 否（即使设置了 tabindex） 是

规范

规范 状态 备注
WHATWG HTML Living Standard
<button> 的定义		 现行的标准 -
HTML5
<button> 的定义		 推荐 -
HTML 4.01 Specification
<button> 的定义		 推荐 -

桌面浏览器兼容性

特性 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基础支持 1.0 支持 1.0 (1.7 或更早) 支持 支持 支持
formaction 属性 9.0 支持 4.0 (2.0) 10 未知 未知
formenctype 属性 9.0 支持 4.0 (2.0) 10 10.6 未知
formmethod 属性 9.0 支持 4.0 (2.0) 10 未知 未知
autofocus 属性 5.0 支持 4.0 (2.0) 10 9.6 5.0
type 属性的值为 menu 未实现 未实现 未实现[1] 未实现 未实现 未知

移动浏览器兼容性

特性 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基础支持 支持 支持 1.0 (1.0) 支持 支持 支持
formaction 属性 未知 支持 4.0 (2.0) 未知 未知 未知
formenctype 属性 未知 支持 4.0 (2.0) 未知 未知 未知
formmethod 属性 未知 支持 4.0 (2.0) 未知 未知 未知
type 属性的值为 menu 未知 未实现 未知 未知 未知 未知

[1] Gecko 还未实现该特性。参见 bug 1241353.

相关链接

用于创建表单的元素：<form>，<datalist>，<fieldset>，<input>,<keygen>，<label>，<legend>，<meter>，<optgroup>，<option>，<output>，<progress>，<select>，<textarea>。