?
This document uses PHP Chinese website manual Release
HTML<button>元素表示一個可點擊的按鈕。能夠在表單，或者 HTML 文檔的任一需要按鈕的位置。默認情況下 HTML 按鈕會呈現(xiàn)與用戶主機相似的樣式，基于user agent。
內(nèi)容類別 | 流內(nèi)容，措辭內(nèi)容，交互內(nèi)容，列出，可引用和可提交的表單相關(guān)的內(nèi)容。 |
|---|---|
允許的內(nèi)容 | 短語內(nèi)容。 |
標(biāo)記遺漏 | 沒有，起始和結(jié)束標(biāo)簽都是強制性的。 |
允許父母 | 任何接受短語內(nèi)容的元素。 |
允許ARIA角色 | 復(fù)選框，鏈接，menuitem，menuitemcheckbox，menuitemradio，收音機，開關(guān)，選項卡 |
DOM界面 | HTMLButtonElement |
屬性
該元素包含 全局屬性.
autofocusHTML5一個布爾屬性，用于指定當(dāng)頁面加載時按鈕必須有輸入焦點，除非用戶重寫，例如通過不同控件鍵入。只有一個表單關(guān)聯(lián)元素可以指定該屬性。
autocomplete該屬性在<button>上的使用并未標(biāo)準(zhǔn)化，只有Firefox允許。不像其它瀏覽器，F(xiàn)irefox默認在頁面加載時持續(xù)禁用Button的動態(tài)狀態(tài)（Firefox persists the dynamic disabled state ）。將此屬性設(shè)置為off (i.e. autocomplete="off")關(guān)閉此特性。參見 bug 654072。
disabled
此布爾屬性表示用戶不能與button交互。如果屬性值未指定，button繼承包含元素，例如<fieldset>；如果沒有設(shè)置disabled屬性的包含元素，button將可交互。
不像其它瀏覽器，F(xiàn)irefox默認在頁面加載時持續(xù)禁用Button的動態(tài)狀態(tài)。使用autocomplete屬性可控制此特性。
formHTML5表示button元素關(guān)聯(lián)的form元素（它的表單擁有者）。此屬性值必須為同一文檔中的一個<form>元素的id屬性。如果此屬性未指定，<button>元素必須是form元素的后代。利用此屬性，你可以將<button>元素放置在文檔內(nèi)的任何位置，而不僅僅是作為他們form元素的后代。
formactionHTML5表示程序處理button提交信息的URI。如果指定了，將重寫button表單擁有者的action屬性。
formenctypeHTML5如果button是submit類型，此屬性值指定提交表單到服務(wù)器的內(nèi)容類型?？蛇x值：
application/x-www-form-urlencoded: 未指定時的默認值。
multipart/form-data: 如果使用type屬性的<input>元素設(shè)置文件，使用此值。
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: 來自表單的數(shù)據(jù)被包含在表單內(nèi)容中，被發(fā)送到服務(wù)器。
get: 來自表單的數(shù)據(jù)以'?'作為分隔符被附加到form的URI屬性中，得到的URI被發(fā)送到服務(wù)器。當(dāng)表單沒有副作用，且僅包含ASCII字符時使用這種方法。
如果指定了，此屬性會重寫button擁有者的method屬性。
formnovalidateHTML5如果button是submit類型，此布爾屬性指定當(dāng)表單被提交時不需要驗證。如果指定了，它會重寫button擁有者的novalidate屬性。
formtargetHTML5如果button是submit類型，此屬性指定一個名稱或關(guān)鍵字，表示接收提交的表單后在哪里顯示響應(yīng)。這是一個瀏覽上下文（例如tab，window或內(nèi)聯(lián)框架）的名稱或關(guān)鍵字。如果指定了，它會重寫button擁有者的target屬性。關(guān)鍵字如下：
_self: 在同一個瀏覽上下文中加載響應(yīng)作為當(dāng)前的。未指定時此值為默認值。
_blank: 在一個新的不知名瀏覽上下文中加載響應(yīng)。
_parent: 在當(dāng)前瀏覽上下文父級中加載響應(yīng)。如果沒有父級的，此選項將按_self執(zhí)行。
_top: 在頂級瀏覽上下文（即當(dāng)前瀏覽上下文的祖先，且沒有父級）中架加載響應(yīng)。如果沒有頂級的，此選項將按_self執(zhí)行。
namebutton的名稱，與表單數(shù)據(jù)一起提交。typebutton的類型。可選值：
submit: 此按鈕提交表單數(shù)據(jù)給服務(wù)器。未指定時，此值為默認值，或者如果此屬性動態(tài)變?yōu)榭罩祷驘o效值。
reset: 此按鈕重置所有組件為初始值。
button: 此按鈕沒有默認行為。它可以有與元素事件相關(guān)的客戶端腳本，當(dāng)事件出現(xiàn)時可觸發(fā)。
valuebutton的初始值。它定義的值與表單數(shù)據(jù)的提交按鈕相關(guān)聯(lián)。當(dāng)表單中的數(shù)據(jù)被提交時，這個值便以參數(shù)的形式被遞送至服務(wù)器。
注
<button>元素比<input>元素更易樣式化。你可以添加內(nèi)聯(lián)HTML內(nèi)容（如<em>，<strong> 甚至<img>），并使用:after和:before偽元素實現(xiàn)復(fù)雜的渲染，而<input>只有文本值屬性。
IE7有一個bug，當(dāng)使用<button type="submit" name="myButton" value="foo">Click me</button>提交表單時，POST數(shù)據(jù)發(fā)送為myButton=Click me而不是myButton=foo。
IE6有一個更糟糕的bug，當(dāng)使用一個button提交表單時，所有button會出現(xiàn)IE7中的bug。
這個bug在IE8中已修復(fù)。
出于訪問性的目的，F(xiàn)irefox會給獲得焦點的button加一個點狀邊框。此邊框通過瀏覽器樣式表中的CSS聲明，但如果需要添加自己的聚焦樣式，可使用button::-moz-focus-inner{ }重寫。
不像其它瀏覽器，F(xiàn)irefox默認在頁面加載時持續(xù)禁用Button的動態(tài)狀態(tài)（Firefox persists the dynamic disabled state ）。將此屬性設(shè)置為off (i.e. autocomplete="off")關(guān)閉此特性。參見 bug 654072。
Firefox 35 之前，Android 會在所有按鈕上設(shè)置默認的 background-image漸變（見bug 763671）。這可以使用background-image: none 來禁用。
Click和focus事件
無論是點擊a <button>會導(dǎo)致它（默認情況下）成為焦點因瀏覽器和操作系統(tǒng)而異。對于結(jié)果<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.
規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
HTML Living Standard該規(guī)范中的'<button>'的定義。 | 生活水平 | |
HTML5該規(guī)范中'<button>'的定義。 | 建議 | |
HTML 4.01規(guī)范該規(guī)范中'<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) |