<button>：按鈕元素

嘗試一下

<button class="favorite styled" type="button">Add to favorites</button>

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(220, 0, 0, 1);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  box-shadow:
    inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.styled:hover {
  background-color: rgba(255, 0, 0, 1);
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

屬性

此元素的屬性包括全域屬性。

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：用於提交其 type 屬性設置為 file 的 <input> 元素。
• text/plain：作為調試輔助工具使用；不應該用於實際表單提交。

如果指定了此屬性，則它將覆蓋按鈕的表單所有者的 enctype 屬性。

formmethod

如果按鈕是提交按鈕（它在 <form> 內部且沒有 type="button"），則此屬性指定用於提交表單的 HTTP 方法。可能的值有：

• post：當將數據提交到服務器時，表單的數據將包含在 HTTP 請求的主體中。在表單包含不應該是公開的信息（例如登錄憑證）時使用。
• get：將表單數據附加到表單的 action URL 中，使用 ? 作為分隔符，並將生成的 URL 發送到服務器。當表單沒有副作用時使用，例如搜索表單。
• dialog：此方法用於指示按鈕關聯的 dialog 應該關閉，並且根本不傳輸表單數據。

如果指定了此屬性，則它將覆蓋按鈕的表單所有者的 method 屬性。

formnovalidate

如果按鈕是提交按鈕，此布林屬性指定提交表單時不應驗證表單。如果指定了此屬性，則它將覆蓋按鈕的表單所有者的 novalidate 屬性。

此屬性也適用於 <input type="image"> 和 <input type="submit"> 元素。

formtarget

如果按鈕是提交按鈕，則此屬性是作者定義的名稱或標準化的、下劃線前綴的關鍵字，指示提交表單後要在哪裡顯示來自提交的回應。這是一個瀏覽上下文（一個分頁、窗口或 <iframe>）的 name 或關鍵字。如果指定了此屬性，則它將覆蓋按鈕的表單所有者的 target 屬性。以下關鍵字具有特殊含義：

• _self：將回應加載到與當前瀏覽上下文相同的地方。如果未指定此屬性，則為默認值。
• _blank：將回應加載到新的未命名瀏覽上下文中——通常是一個新的分頁或窗口，具體取決於用戶的瀏覽器設置。
• _parent：將回應加載到當前瀏覽上下文的父瀏覽上下文中。如果沒有父瀏覽上下文，則此選項的行為與 _self 相同。
• _top：將回應加載到頂級瀏覽上下文中（即當前瀏覽上下文的祖先，並且沒有父瀏覽上下文）。如果沒有父瀏覽上下文，則此選項的行為與 _self 相同。

name

按鈕的名稱，與提交表單時的按鈕值一起作為表單數據的一部分提交。

popovertarget

將 <button> 元素轉換為彈出控制按鈕；以要控制的彈出元素的 ID 作為值。有關更多詳細信息，請參見 Popover API 登錄頁面。

popovertargetaction

指定由控制 <button> 的彈出元素執行的操作。可能的值為：

"hide"

按鈕將隱藏已顯示的彈出元素。如果你嘗試隱藏已經隱藏的彈出元素，則不會執行任何操作。

"show"

按鈕將顯示隱藏的彈出元素。如果你嘗試顯示已經顯示的彈出元素，則不會執行任何操作。

"toggle"

按鈕將在顯示和隱藏之間切換彈出元素。如果彈出元素是隱藏的，它將被顯示；如果彈出元素是顯示的，它將被隱藏。如果省略了 popovertargetaction，則 "toggle" 是控制按鈕執行的默認操作。

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可以編寫可編程動作，例如從列表中刪除項目。

範例

<button name="button">Press me</button>

無障礙議題

圖標按鈕

僅顯示圖標以表示的按鈕沒有可訪問名稱。可訪問名稱提供了輔助技術（例如螢幕閱讀器）在解析文件並生成無障礙樹時使用的信息。然後，輔助技術使用無障礙樹來導航和操作頁面內容。

要為圖標按鈕提供可訪問名稱，請在 <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 屬性將其從螢幕上去除，但保持輔助技術可解析。然而，值得注意的是，保留按鈕文本的視覺呈現有助於可能不熟悉圖標含義或不了解按鈕目的的人群。對於技術不熟悉的人，或者對按鈕使用的圖標具有不同文化解釋的人來說，這尤其重要。

• 什麼是可訪問名稱？| The Paciello Group
• MDN 理解 WCAG，指南 4.1 解釋
• 理解成功標準 4.1.2 | W3C 理解 WCAG 2.0

尺寸和接近性

尺寸

按鈕等交互式元素應提供足夠大的區域，使其易於激活。這有助於各種人群，包括存在運動控制問題的人，以及使用非精確輸入形式（例如觸控筆或手指）的人。建議的最小交互尺寸為 44×44 CSS 像素。

• 理解成功標準 2.5.5：目標尺寸 | W3C 理解 WCAG 2.1
• 目標尺寸和 2.5.5 | Adrian Roselli
• 快速測試：大型觸控目標 - The A11Y Project

接近性

將大量交互式內容（包括按鈕等）放置在視覺上相鄰的地方時，應該有間距將它們分隔開來。這種間距有助於那些可能因為運動控制問題而意外激活錯誤交互式內容的人。

間距可以使用 CSS 屬性（例如 margin）創建。

• 手抖和巨型按鈕問題 - Axess Lab

ARIA 狀態資訊

要描述按鈕的狀態，正確使用的 ARIA 屬性是 aria-pressed，而不是 aria-checked 或 aria-selected。要了解更多信息，請閱讀有關 ARIA 按鈕角色 的信息。

Firefox

Firefox 會在焦點位於按鈕上時添加一個小虛點邊框。這個邊框是在瀏覽器樣式表中通過 CSS 聲明的，但你可以覆蓋它以添加自己的焦點樣式，使用 button::-moz-focus-inner { }。

如果覆蓋了它，確保當焦點移動到按鈕上時的狀態變化足夠明顯，以便視力受損的人能夠感知它。

顏色對比度是通過比較按鈕文本和背景顏色值相對於按鈕放置在其上的背景的亮度來確定的。為了滿足當前的 網頁內容無障礙性指南（WCAG），文本內容需要達到 4.5:1 的比率，大文本則需要 3:1。 （大文本被定義為 18.66px 和 bold 或更大，或者 24px 或更大。）

• WebAIM: 顏色對比度檢查器
• MDN 了解 WCAG，指南 1.4 說明
• 了解成功標準 1.4.3 | W3C 了解 WCAG 2.0

點擊和焦點

在大多數瀏覽器中，單擊 <button> 或 <input> 按鈕類型會導致其（默認情況下）獲得焦點，但是根據瀏覽器和操作系統，這是不同的。大多數瀏覽器確實會將焦點設置在單擊的按鈕上，但是 Safari 由於設計原因不會這樣做。

技術摘要

規範

瀏覽器相容性