©
                    本文档使用
                    php中文网手册 发布
                
HTML<button>元素表示一个可点击的按钮。能够在表单,或者 HTML 文档的任一需要按钮的位置。默认情况下 HTML 按钮会呈现与用户主机相似的样式,基于user agent。
内容类别  | 流内容,措辞内容,交互内容,列出,可引用和可提交的表单相关的内容。  | 
|---|---|
允许的内容  | 短语内容。  | 
标记遗漏  | 没有,起始和结束标签都是强制性的。  | 
允许父母  | 任何接受短语内容的元素。  | 
允许ARIA角色  | 复选框,链接,menuitem,menuitemcheckbox,menuitemradio,收音机,开关,选项卡  | 
DOM界面  | HTMLButtonElement  | 
该元素包含 全局属性.
autofocusHTML5一个布尔属性,用于指定当页面加载时按钮必须有输入焦点,除非用户重写,例如通过不同控件键入。只有一个表单关联元素可以指定该属性。
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属性可控制此特性。
formHTML5表示button元素关联的form元素(它的表单拥有者)。此属性值必须为同一文档中的一个<form>元素的id属性。如果此属性未指定,<button>元素必须是form元素的后代。利用此属性,你可以将<button>元素放置在文档内的任何位置,而不仅仅是作为他们form元素的后代。
formactionHTML5表示程序处理button提交信息的URI。如果指定了,将重写button表单拥有者的action属性。
formenctypeHTML5如果button是submit类型,此属性值指定提交表单到服务器的内容类型。可选值:
application/x-www-form-urlencoded: 未指定时的默认值。
multipart/form-data: 如果使用type属性的<input>元素设置文件,使用此值。
text/plain
如果指定此属性,它将重写button的表单拥有者的enctype属性。
formmethodHTML5If the button is a submit button, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
post: 来自表单的数据被包含在表单内容中,被发送到服务器。
get:  来自表单的数据以'?'作为分隔符被附加到form的URI属性中,得到的URI被发送到服务器。当表单没有副作用,且仅包含ASCII字符时使用这种方法。
如果指定了,此属性会重写button拥有者的method属性。
formnovalidateHTML5如果button是submit类型,此布尔属性指定当表单被提交时不需要验证。如果指定了,它会重写button拥有者的novalidate属性。
formtargetHTML5如果button是submit类型,此属性指定一个名称或关键字,表示接收提交的表单后在哪里显示响应。这是一个浏览上下文(例如tab,window或内联框架)的名称或关键字。如果指定了,它会重写button拥有者的target属性。关键字如下:
_self: 在同一个浏览上下文中加载响应作为当前的。未指定时此值为默认值。
_blank:  在一个新的不知名浏览上下文中加载响应。
_parent: 在当前浏览上下文父级中加载响应。如果没有父级的,此选项将按_self执行。
_top:  在顶级浏览上下文(即当前浏览上下文的祖先,且没有父级)中架加载响应。如果没有顶级的,此选项将按_self执行。
namebutton的名称,与表单数据一起提交。typebutton的类型。可选值:
submit:  此按钮提交表单数据给服务器。未指定时,此值为默认值,或者如果此属性动态变为空值或无效值。
reset: 此按钮重置所有组件为初始值。
button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本,当事件出现时可触发。
valuebutton的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时,这个值便以参数的形式被递送至服务器。
<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 之前,Android 会在所有按钮上设置默认的 background-image渐变(见bug 763671)。这可以使用background-image: none 来禁用。
无论是点击a <button>会导致它(默认情况下)成为焦点因浏览器和操作系统而异。对于结果<input>的type="button"和type="submit"是一样的。
Desktop Browsers  | 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  | 
Mobile Browsers  | 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>
Please note that this button has CSS applied.
规范  | 状态  | 评论  | 
|---|---|---|
HTML Living Standard该规范中的'<button>'的定义。  | 生活水平  | |
HTML5该规范中'<button>'的定义。  | 建议  | |
HTML 4.01规范该规范中'<button>'的定义。  | 建议  | 
Feature  | Chrome  | Edge  | Firefox  | Internet Explorer  | Opera  | Safari  | 
|---|---|---|---|---|---|---|
Basic Support  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
autofocus  | 5  | (Yes)  | 4  | 10  | 9.6  | 5  | 
autocomplete  | No  | No  | (Yes)  | No  | No  | No  | 
disabled  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
form  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
formaction  | 9  | (Yes)  | 4  | 10  | ?  | ?  | 
formenctype  | 9  | (Yes)  | 4  | 10  | 10.6  | ?  | 
formmethod  | 9  | (Yes)  | 4  | 10  | ?  | ?  | 
formnovalidate  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
formtarget  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
name  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
type  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
value  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
Feature  | Android  | Chrome for Android  | Edge mobile  | Firefox for Android  | IE mobile  | Opera Android  | iOS Safari  | 
|---|---|---|---|---|---|---|---|
Basic Support  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
autofocus  | ?  | ?  | ?  | 4  | ?  | ?  | ?  | 
autocomplete  | No  | No  | No  | (Yes)  | (Yes)  | No  | No  | 
disabled  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
form  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
formaction  | ?  | ?  | (Yes)  | 4  | ?  | ?  | ?  | 
formenctype  | ?  | ?  | (Yes)  | 4  | ?  | ?  | ?  | 
formmethod  | ?  | ?  | (Yes)  | 4  | ?  | ?  | ?  | 
formnovalidate  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
formtarget  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
name  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
type  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | 
value  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  | (Yes)  |