<button>
========

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

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

属性
--

该元素包含全局属性 (en-US).

`autofocus`

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

`autocomplete` 
非标准

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

`disabled`

此布尔属性表示用户不能与 button 交互。如果属性值未指定，button 继承包含元素，例如`<fieldset>`；如果没有设置**disabled**属性的包含元素，button 将可交互。不像其他浏览器，Firefox 默认在页面加载时持续禁用 Button 的动态状态。使用`autocomplete`属性可控制此特性。

`form`

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

`formaction`

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

`formenctype`

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

* `application/x-www-form-urlencoded`: 未指定时的默认值。
* `multipart/form-data`: 如果使用`type`属性的`<input>`元素设置文件，使用此值。
* `text/plain`如果指定此属性，它将重写 button 的表单拥有者的`enctype`属性。

`formmethod`

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

* `post`：来自表单的数据被包含在表单内容中，被发送到服务器。
* `get`：来自表单的数据以'?'作为分隔符被附加到 form 的**URI**属性中，得到的 URI 被发送到服务器。当表单没有副作用，且仅包含 ASCII 字符时使用这种方法。如果指定了，此属性会重写 button 拥有者的`method`属性。

`formnovalidate`

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

`formtarget`

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

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

`name`

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

`type`

button 的类型。可选值：

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

`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` (en-US) { }` 重写这个样式。

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

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

### 点击和焦点

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

| 桌面浏览器 | 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 |

| 移动浏览器 | 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 |

示例
--


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


请注意上例中应用了 CSS。

规范
--

| Specification |
| --- |
| HTML Standard # the-button-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

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