<button> - HTML（超文本标记语言） 编辑

HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。 默认情况下，HTML按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮， 但你可以使用 CSS 来改变按钮的样貌。

内容分类	Flow content, phrasing content, Interactive content, listed, labelable, and submittable form-associated element, palpable content.
允许的内容	Phrasing content.
标签略写	不允许，开始标签和结束标签都不能省略。
允许的父元素	任意可容纳 phrasing content 的元素。
Permitted ARIA roles	checkbox, link, menuitem, menuitemcheckbox, menuitemradio, radio, switch, tab
DOM 接口	HTMLButtonElement

属性

该元素包含全局属性.

autofocus HTML5

一个布尔属性，用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。只有一个表单关联元素可以指定该属性。

autocomplete

该属性在 <button>上的使用并未标准化，只有Firefox允许。不像其它浏览器，Firefox默认在页面加载时持续禁用Button的动态状态（Firefox persists the dynamic disabled state ）。将此属性设置为off (i.e. autocomplete="off")关闭此特性。参见 bug 654072。

disabled

此布尔属性表示用户不能与button交互。如果属性值未指定，button继承包含元素，例如<fieldset>；如果没有设置disabled属性的包含元素，button将可交互。

不像其它浏览器，Firefox默认在页面加载时持续禁用Button的动态状态。使用autocomplete属性可控制此特性。

form HTML5

表示button元素关联的form元素（它的表单拥有者）。此属性值必须为同一文档中的一个<form>元素的id属性。如果此属性未指定，<button>元素必须是form元素的后代。利用此属性，你可以将<button>元素放置在文档内的任何位置，而不仅仅是作为他们form元素的后代。

formaction HTML5

表示程序处理button提交信息的URI。如果指定了，将重写button表单拥有者的action属性。

formenctype HTML5

如果button是submit类型，此属性值指定提交表单到服务器的内容类型。可选值：

• application/x-www-form-urlencoded: 未指定时的默认值。
• multipart/form-data: 如果使用type属性的<input>元素设置文件，使用此值。
• text/plain

如果指定此属性，它将重写button的表单拥有者的enctype属性。

formmethod HTML5

如果button是submit类型，此属性指定浏览器提交表单使用的HTTP方法。可选值:

• post: 来自表单的数据被包含在表单内容中，被发送到服务器。
• get:  来自表单的数据以'?'作为分隔符被附加到form的URI属性中，得到的URI被发送到服务器。当表单没有副作用，且仅包含ASCII字符时使用这种方法。

如果指定了，此属性会重写button拥有者的method属性。

formnovalidate HTML5

如果button是submit类型，此布尔属性指定当表单被提交时不需要验证。如果指定了，它会重写button拥有者的novalidate属性。

formtarget HTML5

如果button是submit类型，此属性指定一个名称或关键字，表示接收提交的表单后在哪里显示响应。这是一个浏览上下文（例如tab，window或内联框架）的名称或关键字。如果指定了，它会重写button拥有者的target 属性。关键字如下：

• _self: 在同一个浏览上下文中加载响应作为当前的。未指定时此值为默认值。
• _blank:  在一个新的不知名浏览上下文中加载响应。
• _parent: 在当前浏览上下文父级中加载响应。如果没有父级的，此选项将按_self执行。
• _top:  在顶级浏览上下文（即当前浏览上下文的祖先，且没有父级）中架加载响应。如果没有顶级的，此选项将按_self执行。

name

button的名称，与表单数据一起提交。

type

button的类型。可选值：

• submit:  此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
• reset:  此按钮重置所有组件为初始值。
• button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
• menu: 此按钮打开一个由指定<menu>元素进行定义的弹出菜单。

value

button的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。

注意

<button> 元素比 <input> 元素更容易使用样式。你可以在元素内添加HTML内容（像 <em>、<strong> 甚至 <img>），以及 ::after 和 ::before 伪元素来实现复杂的效果，而 <input> 只支持文本内容。

如果你的按钮不是用于向服务器提交数据，请确保这些按钮的 type 属性设置成 button。否则它们被按下后将会向服务器发送数据并加载（可能并不存在的）响应内容，因而可能会破坏当前文档的状态。

IE7 在使用 <button type="submit" name="myButton" value="foo">Click me</button> 提交表单时存在一个BUG，POST 提交的数据将是 myButton=Click me 而不是 myButton=foo（没有把 value 属性的值 foo 提交上去）。
IE6 的BUG更糟糕，在提交表单的时候会把表单内所有的按钮都提交上去，同时还有和 IE7 一样的BUG。
IE8 已经修复了这个问题。

Firefox 出于使用方便的目的，会在获得焦点的按钮上添加一个细小的虚线框。 这个边框由浏览器内部的样式表中的 CSS 定义，但如果有必要的话，你可以用 button::-moz-focus-inner { } 重写这个样式。

Firefox 在默认情况下会在页面加载时让 <button> 保持动态禁用状态 ，这个行为在其它浏览器上是没有的。将 autocomplete 属性设置为 off 可以禁用这项特性。参见 bug 654072。

安卓系统上的 Firefox <35 会为每个按钮设置一个默认的 background-image  渐变背景（参见 bug 763671）。这项可以通过 background-image: none 禁用。

点击和焦点

点击 <button> 会让浏览器和操作系统（默认情况下）将焦点放在其上。 <input> 的 type="button" 和 type="submit" 也是一样的。

点击 <button> 会让其获得焦点吗？

桌面浏览器	Windows 8.1	OS X 10.9
Firefox 30.0	Yes	No (even with a tabindex)
Chrome 35	Yes	Yes
Safari 7.0.5	N/A	No (even with a tabindex)
Internet Explorer 11	Yes	N/A
Presto (Opera 12)	Yes	Yes

轻点（tapping） <button> 会让其获得焦点吗？

移动浏览器	iOS 7.1.2	Android 4.4.4
Safari Mobile	No (even with a tabindex)	N/A
Chrome 35	No (even with a tabindex)	Yes

示例

<button name="button">Click me</button>

请注意上例中应用了 CSS 。

技术规范

Specification	Status	Comment
HTML Living Standard <button>	Living Standard
HTML5 <button>	Recommendation
HTML 4.01 Specification <button>	Recommendation

浏览器兼容性

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

Other elements that are used for creating forms: <form>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.