<button>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

属性

该元素包含全局属性.

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 { } 重写这个样式。

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

参见

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