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

以下代码展示了一个按钮：

点我!

特性

属性

该元素包含了 全局属性。

HTML5 中的新属性：autofocus、form、formaction、formenctype、formmethod、formnovalidate 以及 formtarget。

一个布尔值的元素属性。用于指定当页面加载时，该按钮应当自动获得输入焦点。除非是用户重写，例如通过其他控件键入，才会失去焦点。一个文档中，只能有一个表单相关的元素可以指定该属性。

该属性用在 上还未标准化，是 Fireofx 特有的。不像其它浏览器，Firefox默认在页面跳转时，会保留 button 的动态禁用状态(Firefox persists the dynamic disabled state)。设置该属性为 off (即 autocomplete="off")可以关闭此特性。参见 bug 654072。可选值有：

on

off

一个布尔值的元素属性。表示用户不能和该按钮交互。如果该属性未设置，那么按钮继承自它的父元素的设置，例如

；如果父元素没有设置 disabled 属性，那么按钮是启用的。

form 属性表示该按钮所关联的表单元素 id。该属性的值必须是同一个文档中的

的 id 属性。如果该属性未指定，且 存在上级 元素，则关联到该元素。通过该属性， 元素可以关联到一个文档中的任意位置的 元素，而不仅仅是作为 元素的后代。

表示该按钮提交时，接收表单信息的 URI。如果指定了，将会覆盖按钮所属表单的

如果该按钮是一个提交按钮，该属性指定了在向服务器发送表单数据之前如何对其进行编码。该属性与 type="submit" 配合使用。可选值有：

application/x-www-form-urlencoded：默认值。在发送前对所有字符进行编码。

multipart/form-data：如果 元素的 file

text/plain：将空格转换为 "+" 符号，但不编码特殊字符。

如果指定了该属性，则覆盖掉按钮所属表单的

如果按钮的类型是 submit，则该属性指定浏览器用于提交表单的 HTTP 方法。可选值有：

post: 表单中的数据包含在表单的正文中，并发送到服务器。

get: 表单中的数据以 “?” 作为分隔符，附加到 form 属性URI中，并将生成的URI发送到服务器。当表单没有副作用并且只包含ASCII字符时可以使用此方法。

如果指定了，该属性将覆盖按钮的表单所有者的

一个布尔值的元素属性。如果按钮的类型是 submit，则此布尔属性指定在提交表单时不会验证该表单。如果指定了此属性，它将覆盖按钮的表单所有者的

如果按钮的类型是 submit，则此属性是一个名称或关键字，指示在提交表单后，在何处显示收到的响应(即 action URL的返回内容)。这是一个 浏览上下文(例如，标签页，窗口或内联框架)的名称或关键字。如果指定了此属性，它将覆盖按钮的表单所有者的

_self：将响应加载到当前的浏览上下文中。未指定时此值为默认值。

_blank：将响应加载到新的未命名浏览上下文中。

_parent：将响应加载到当前的父浏览上下文中。如果没有父级，则此选项的行为方式与 _self 相同。

_top：将响应加载到顶级浏览上下文(即，当前浏览上下文的祖先，且没有父级)。如果没有父级，则此选项的行为方式与 _self 相同。

framename：将响应加载到指定的 中。

一个字符串。按钮的名称，提交时作为表单的数据一部分的名称。

规定按钮的类型。可选值有：

submit：该按钮表示点击后将表单数据提交到服务器。未指定属性时的默认值。或是将属性动态更改为空值或无效值时，也变为该默认值。

reset：该按钮将所有控件重置为其初始值。

button：该按钮没有默认行为。它可以用于按钮的事件发生时(如点击)，触发关联的客户端的脚本。

menu：该按钮打开一个由它指定的

一个字符串。规定按钮的初始值。它定义了表单提交的数据中，按钮相关联的值。当表单中提交时，这个值便以参数的形式被递送至服务器。可由脚本进行修改。

事件属性

标签支持 HTML 的事件属性。

注意

给 元素加样式，要比 容易得多。你可以添加内联的 HTML 内容(如 , ，甚至是 )，还可以使用 :after 和 :before 伪元素来实现复杂的效果，而 只能设置一个文本的值，这是该元素与使用 元素创建的按钮之间的不同之处。

IE7 有一个 bug，当使用 Click me 提交表单时，发送的 POST 数据将是 myButton=Click me 而不是 myButton=foo。

IE6 有一个更糟糕的 bug，当使用一个按钮提交表单时，所有的按钮都会出现和 IE7 相同的 bug。

这个 bug 在 IE8 已经被修复了。

如需兼容旧版浏览器，可使用 在 HTML 表单中创建按钮。

为了无障碍考虑，Firefox 会给获得焦点的按钮上加上一个小的点状边框。这个边框是通过浏览器样式表的 CSS 声明的，但是如果需要添加自己的焦点样式，可以使用 button::-moz-focus-inner { } 来重写。

不像其它浏览器，Firefox默认在页面跳转时，会保留 button 的动态禁用状态(Firefox persists the dynamic disabled state)。设置 off 可以关闭此特性。参见 bug 654072。

Firefox <35 for Android 会在所有按钮上的 background-image 设置默认的渐变(参见 bug 763671)。可以设置 background-image: none 来禁用该效果。

点击和焦点

在不同的浏览器和系统中，默认情况下，点击一个 是否会获得焦点的结果是不一样的。设置了 type="button" 和 type="submit" 的 元素获取焦点结果与 一致。

在桌面浏览器中，点击 是否能获得焦点?

桌面浏览器

Windows 8.1

OS X 10.9

Firefox 30.0

是

否(即使设置了 tabindex)

Chrome 35

是

是

Safari 7.0.5

N/A

否(即使设置了 tabindex)

Internet Explorer 11

是

N/A

Presto (Opera 12)

是

是

在移动桌面浏览器中，点击 是否能获得焦点?

移动浏览器

iOS 7.1.2

Android 4.4.4

Safari Mobile

否(即使设置了 tabindex)

N/A

Chrome 35

否(即使设置了 tabindex)

是

规范

桌面浏览器兼容性

特性

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

基础支持

1.0

支持

1.0 (1.7 或更早)

支持

支持

支持

formaction 属性

9.0

支持

4.0 (2.0)

10

未知

未知

formenctype 属性

9.0

支持

4.0 (2.0)

10

10.6

未知

formmethod 属性

9.0

支持

4.0 (2.0)

10

未知

未知

autofocus 属性

5.0

支持

4.0 (2.0)

10

9.6

5.0

type 属性的值为 menu

未实现

未实现

未实现[1]

未实现

未实现

未知

移动浏览器兼容性

特性

Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

基础支持

支持

支持

1.0 (1.0)

支持

支持

支持

formaction 属性

未知

支持

4.0 (2.0)

未知

未知

未知

formenctype 属性

未知

支持

4.0 (2.0)

未知

未知

未知

formmethod 属性

未知

支持

4.0 (2.0)

未知

未知

未知

type 属性的值为 menu

未知

未实现

未知

未知

未知

未知

[1] Gecko 还未实现该特性。参见 bug 1241353.

相关链接