<button>: 按鈕元素
試用
屬性
此元素的屬性包括 全域性屬性。
autofocus-
此布林屬性指定按鈕在頁面載入時應獲得輸入 焦點。文件中只有一個元素可以擁有此屬性。
disabled-
此布林屬性阻止使用者與按鈕互動：按鈕無法被按下或獲得焦點。
form-
要將按鈕與其關聯的
<form>元素（其表單所有者）關聯。此屬性的值必須是同一文件中<form>的id。（如果未設定此屬性，則<button>將與其祖先<form>元素關聯，如果有的話。）此屬性允許您將
<button>元素與文件中任何地方的<form>元素關聯，而不僅僅是在<form>內部。它還可以覆蓋祖先<form>元素。 formaction-
處理按鈕提交資訊的 URL。覆蓋按鈕表單所有者的
action屬性。如果不存在表單所有者，則不執行任何操作。 formenctype-
如果按鈕是提交按鈕（它在
<form>內部/與其關聯且沒有type="button"），則指定如何編碼提交的表單資料。可能的值application/x-www-form-urlencoded: 如果未使用屬性，則為預設值。multipart/form-data: 用於提交<input>元素，其type屬性設定為file。text/plain: 指定為除錯輔助工具；不應用於實際的表單提交。
如果指定了此屬性，它將覆蓋按鈕表單所有者的
enctype屬性。 formmethod-
如果按鈕是提交按鈕（它在
<form>內部/與其關聯且沒有type="button"），則此屬性指定用於提交表單的 HTTP 方法。可能的值post: 表單中的資料在傳送到伺服器時包含在 HTTP 請求的正文中。當表單包含不應公開的資訊（如登入憑據）時使用。get: 表單資料附加到表單的actionURL，並使用?作為分隔符，並將生成的 URL 傳送到伺服器。當表單 沒有副作用 時使用此方法，例如搜尋表單。dialog: 此方法用於指示按鈕關閉與其關聯的 對話方塊，並且根本不傳輸表單資料。
如果指定，此屬性將覆蓋按鈕表單所有者的
method屬性。 formnovalidate-
如果按鈕是提交按鈕，則此布林屬性指定在提交表單時不進行 驗證。如果指定了此屬性，它將覆蓋按鈕表單所有者的
novalidate屬性。此屬性也適用於
<input type="image">和<input type="submit">元素。 formtarget-
如果按鈕是提交按鈕，此屬性是作者定義的名稱或標準化的、以下劃線為字首的關鍵字，指示將提交表單的響應顯示在何處。這是瀏覽上下文（選項卡、視窗或
<iframe>）的name或關鍵字。如果指定了此屬性，它將覆蓋按鈕的表單所有者的target屬性。以下關鍵字具有特殊含義_self：將響應載入到與當前瀏覽上下文相同的瀏覽上下文中。如果未指定屬性，則為預設值。_blank：將響應載入到新的未命名的瀏覽上下文中——通常是新的選項卡或視窗，具體取決於使用者的瀏覽器設定。_parent：將響應載入到當前瀏覽上下文的父瀏覽上下文中。如果沒有父級，此選項的行為與_self相同。_top：將響應載入到頂層瀏覽上下文中（即，瀏覽上下文是當前瀏覽上下文的祖先，並且沒有父級）。如果沒有父級，此選項的行為與_self相同。
name-
按鈕的名稱，在使用該按鈕提交表單時，作為一對與按鈕的
value一起提交作為表單資料的一部分。 popovertarget-
將
<button>元素轉換為彈出式控制元件按鈕；將要控制的彈出式元素的 ID 作為其值。有關詳細資訊，請參閱彈出式 API著陸頁。 popovertargetaction-
指定對由控制
<button>控制的彈出式元素執行的操作。可能的取值有 type-
按鈕的預設行為。可能的取值有
submit：按鈕將表單資料提交到伺服器。如果未為與<form>關聯的按鈕指定屬性，或者屬性為空或無效值，則為預設值。reset：按鈕將所有控制元件重置為其初始值，例如<input type="reset">。（這種行為往往會讓使用者感到惱火。）button：按鈕沒有預設行為，並且預設情況下按下去不會執行任何操作。它可以具有客戶端指令碼監聽元素的事件，這些事件在事件發生時觸發。
value-
定義與按鈕的
name關聯的值，當按鈕與表單資料一起提交時。當使用此按鈕提交表單時，此值將作為引數傳遞給伺服器。
備註
具有formaction屬性但沒有關聯表單的提交按鈕將不執行任何操作。您必須設定表單所有者，方法是將其包裝在<form>中或將屬性form設定為表單的 id。
<button>元素比<input>元素更容易設定樣式。您可以新增內部 HTML 內容（例如<i>、<br>，甚至<img>），並使用::after和::before偽元素進行復雜渲染。
如果您的按鈕不是用於將表單資料提交到伺服器，請確保將它們的type屬性設定為button。否則，它們將嘗試提交表單資料並載入（不存在的）響應，這可能會破壞文件的當前狀態。
雖然<button type="button">沒有預設行為，但可以使用指令碼化的事件處理程式來觸發行為。可以使用JavaScript使啟用的按鈕執行可程式設計的操作，例如從列表中刪除專案。
預設情況下，使用者代理將按鈕的樣式設定為display: flow-root，這將建立新的塊級格式化上下文，並水平和垂直居中按鈕的子元素，只要它們沒有溢位。如果按鈕被定義為 flex 或 grid 容器，子元素將表現為 flex 或 grid 專案。設定為display: inline的按鈕將被設定為樣式，就像其值為display: inline-block一樣。
無障礙
圖示按鈕
僅顯示圖示的按鈕沒有可訪問的名稱。可訪問的名稱為輔助技術提供資訊，例如螢幕閱讀器在解析文件並生成可訪問性樹時可以訪問這些資訊。然後，輔助技術使用可訪問性樹來導航和操作頁面內容。
要為圖示按鈕提供可訪問的名稱，請在<button>元素中放置簡明描述按鈕功能的文字。
示例
<button name="favorite">
<svg aria-hidden="true" viewBox="0 0 10 10">
<path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
</svg>
Add to favorites
</button>
結果
如果您想在視覺上隱藏按鈕的文字，一個可訪問的方式是使用CSS 屬性組合將其在視覺上從螢幕中移除，但保持輔助技術可解析。
但是，值得注意的是，保留按鈕文字可見可以幫助那些可能不熟悉圖示的含義或不理解按鈕用途的人。這對於那些技術水平不高或可能對按鈕使用的圖示有不同文化理解的人來說尤其重要。
大小和距離
ARIA 狀態資訊
要描述按鈕的狀態，要使用的正確 ARIA 屬性是aria-pressed，而不是aria-checked或aria-selected。要了解更多資訊，請閱讀有關ARIA 按鈕角色的資訊。
按鈕樣式
最好不要覆蓋具有焦點的元素的預設焦點環。如果覆蓋了按鈕樣式，則務必確保焦點狀態具有足夠的對比度，以便視力低下的使用者可以感知它，並且有認知差異的人可以理解它。
:focus-visible偽類可用於將樣式應用於具有:focus的元素，僅當用戶代理的啟發式演算法確定應突出顯示焦點時，例如當<button>接收到鍵盤焦點時。有關更多資訊，請參閱:focus vs :focus-visible。
顏色對比度比是透過將按鈕文字和背景顏色值的亮度與放置按鈕的背景進行比較來確定的。要滿足當前的Web 內容無障礙指南 (WCAG)，文字內容的比率需要為 4.5:1，大型文字的比率需要為 3:1。（大型文字定義為 18.66px 和bold或更大，或 24px 或更大。）
點選和焦點
點選<button>或<input>按鈕型別是否會導致它（預設情況下）獲得焦點，這取決於瀏覽器和作業系統。大多數瀏覽器確實會將焦點賦予被點選的按鈕，但Safari 不會，這是出於設計原因。
示例
<button name="button">Press me</button>
技術摘要
規範
| 規範 |
|---|
| HTML 標準 # the-button-element |
瀏覽器相容性
BCD 表格僅在瀏覽器中載入