button - [ HTML 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Verzeichnis suchen

Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

Figuren

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

Click和focus事件

无论是点击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)

Vorheriger Artikel： Nächster Artikel：