button

<button>

HTML<button>元素表示一个可点击的按钮。能够在表单，或者 HTML 文档的任一需要按钮的位置。默认情况下 HTML 按钮会呈现与用户主机相似的样式，基于user agent。

属性

该元素包含 全局属性.

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

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

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

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

• 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属性。

• _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 来禁用。

Click和focus事件

无论是点击a <button>会导致它（默认情况下）成为焦点因浏览器和操作系统而异。对于结果<input>的type="button"和type="submit"是一样的。

示例

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

Please note that this button has CSS applied.

规范

浏览器兼容性