<button>

概述

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

• 内容范畴 流内容, 段落内容, 交互内容, 列举的, 可标签的, 和 可提交的 表单相关 元素, palpable content.
• 允许内容 段落内容.
• 遗漏标签 None, both the starting and ending tag are mandatory. 
• 允许的父级元素 任何接受 段落内容的元素.
• DOM接口 HTMLButtonElement
• 元素类型 Inline
•  

属性

该元素包含 全局属性.

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的动态状态（Firefox persists the dynamic disabled state ）。使用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: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。

value

button的初始值。

示例

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

请注意button应用了CSS样式。

规范

浏览器兼容性

Click和focus事件

点击<button>是否会导致（默认）它获得焦点，但在浏览器或操作系统中有所不同。与type="button" 和 type="submit"的<input>一致。

注意

<button>元素比<input>元素更易样式化。你可以添加内联HTML内容（如<em>，<strong> 甚至<img>），并使用:after和:before伪元素实现复杂的渲染，而<input>只有文本值属性。

IE7有一个bug，当使用<button type="submit" name="myButton" value="foo">Click me</button>提交表单时，POST数据发送为myButton=Click me而不是myButton=foo。
IE6有一个更糟糕的bug，当使用一个button提交表单时，所有button会出现IE7中的bug。
这个bug在IE8中已修复。

出于访问性的目的，Firefox会给获得焦点的button加一个点状边框。此边框通过浏览器样式表中的CSS声明，但如果需要添加自己的聚焦样式，可使用button::-moz-focus-inner { }重写。

不像其它浏览器，Firefox默认在页面加载时持续禁用Button的动态状态（Firefox persists the dynamic disabled state ）。将此属性设置为off (i.e. autocomplete="off")关闭此特性。参见 bug 654072。

Firefox <35 for Android sets a default background-image gradient on all buttons (see bug 763671). This can be disabled using background-image: none. 35版本以下，Android设置给所有button一个默认的 background-image 梯度（参见bug 763671）。这个可以使用background-image: none禁用。

另请参阅

其它用于创建表单的元素: <form>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.