<button>：按鈕元素
Baseline 廣泛可用 *
<button> HTML 元素是一種互動式元素，使用者可以使用滑鼠、鍵盤、手指、語音命令或其他輔助技術來啟用它。啟用後，它會執行一個動作，例如提交表單或開啟對話方塊。
試一試
<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: white;
text-shadow: 1px 1px 1px black;
border-radius: 10px;
background-color: tomato;
background-image: linear-gradient(
to top left,
rgb(0 0 0 / 0.2),
rgb(0 0 0 / 0.2) 30%,
transparent
);
box-shadow:
inset 2px 2px 3px rgb(255 255 255 / 0.6),
inset -2px -2px 3px rgb(0 0 0 / 0.6);
}
.styled:hover {
background-color: red;
}
.styled:active {
box-shadow:
inset -2px -2px 3px rgb(255 255 255 / 0.6),
inset 2px 2px 3px rgb(0 0 0 / 0.6);
}
屬性
此元素的屬性包括全域性屬性。
autofocus-
此布林屬性指定頁面載入時按鈕應具有輸入焦點。文件中只能有一個元素具有此屬性。
command-
指定透過
commandfor屬性指定的控制<button>所控制的元素上要執行的操作。可能的值有"show-modal"-
按鈕將以模態形式顯示一個
<dialog>。如果對話方塊已經是模態的，則不採取任何操作。這相當於以宣告方式在<dialog>元素上呼叫HTMLDialogElement.showModal()方法。 "close"-
按鈕將關閉一個
<dialog>元素。如果對話方塊已關閉，則不採取任何操作。這相當於以宣告方式在<dialog>元素上呼叫HTMLDialogElement.close()方法。 "request-close"-
按鈕將觸發
<dialog>元素上的cancel事件，以請求瀏覽器關閉它，然後是close事件。這與close命令不同，因為作者可以在cancel事件上呼叫Event.preventDefault()以阻止<dialog>關閉。如果對話方塊已關閉，則不採取任何操作。這相當於以宣告方式在<dialog>元素上呼叫HTMLDialogElement.requestClose()方法。 "show-popover"-
按鈕將顯示一個隱藏的彈出框。如果您嘗試顯示一個已顯示的彈出框，則不會採取任何操作。有關更多詳細資訊，請參閱 Popover API。這等同於為
popovertargetaction屬性設定show值，並且還提供了以宣告方式在彈出框元素上呼叫HTMLElement.showPopover()方法的功能。 "hide-popover"-
按鈕將隱藏一個正在顯示的彈出框。如果您嘗試隱藏一個已隱藏的彈出框，則不會採取任何操作。有關更多詳細資訊，請參閱 Popover API。這等同於為
popovertargetaction屬性設定hide值，並且還提供了以宣告方式在彈出框元素上呼叫HTMLElement.hidePopover()方法的功能。 "toggle-popover"-
按鈕將切換彈出框在顯示和隱藏之間。如果彈出框是隱藏的，它將被顯示；如果彈出框是顯示的，它將被隱藏。有關更多詳細資訊，請參閱 Popover API。這等同於為
popovertargetaction屬性設定toggle值，並且還提供了以宣告方式在彈出框元素上呼叫HTMLElement.togglePopover()方法的功能。 - 自定義值
-
此屬性可以表示以兩個連字元 (
--) 為字首的自定義值。具有自定義值的按鈕將在受控元素上分派CommandEvent。
commandfor-
將
<button>元素轉換為命令按鈕，透過發出按鈕的command屬性中指定的命令來控制給定的互動式元素。commandfor屬性將要控制的元素的 ID 作為其值。這是popovertarget的更通用版本。 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 作為其值。使用popovertarget屬性在彈出框及其呼叫按鈕之間建立關係具有兩個額外的有用效果- 瀏覽器在彈出視窗和呼叫者之間建立隱式的
aria-details和aria-expanded關係，並在顯示時將彈出視窗放置在鍵盤焦點導航順序中的邏輯位置。這使得彈出視窗對鍵盤和輔助技術 (AT) 使用者更易於訪問（另請參閱 彈出可訪問性功能）。 - 瀏覽器在兩者之間建立了一個隱式錨點引用，使得使用 CSS 錨點定位 來相對於其控制元件定位彈出視窗非常方便。有關更多詳細資訊，請參閱 彈出錨點定位。
- 瀏覽器在彈出視窗和呼叫者之間建立隱式的
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，這會建立一個新的塊級格式化上下文，並使按鈕的子元素在不溢位的情況下水平和垂直居中。如果按鈕定義為彈性或網格容器，則子元素將表現為彈性或網格項。設定為 display: inline 的按鈕將被樣式化，就像該值設定為 display: inline-block 一樣。
無障礙
圖示按鈕
只顯示圖示的按鈕沒有可訪問名稱。可訪問名稱為輔助技術（例如螢幕閱讀器）提供資訊，以便它們在解析文件並生成可訪問性樹時訪問。然後，輔助技術使用可訪問性樹來導航和操作頁面內容。
要為圖示按鈕提供可訪問名稱，請在 <button> 元素中放置簡明描述按鈕功能的文字。
示例
<button name="favorite">
<svg fill="black" viewBox="0 0 42 42">
<path
d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,
3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,
2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>
</svg>
Add to favorites
</button>
結果
如果您想在視覺上隱藏按鈕文字，一種可訪問的方法是使用CSS 屬性組合，在視覺上將其從螢幕上移除，但保持輔助技術可解析。
然而，值得注意的是，保持按鈕文字可見可以幫助那些可能不熟悉圖示含義或不理解按鈕用途的人。這對於不熟悉技術或可能對按鈕使用的圖示有不同文化解釋的人尤其重要。
大小和距離
大小
互動元素（例如按鈕）應具有足夠大的區域以便於啟用。這有助於各種人群，包括有運動控制問題的人和使用非精確輸入形式（例如觸控筆或手指）的人。建議最小互動尺寸為 44×44 CSS 畫素。
臨近度
大量互動內容（包括按鈕）彼此靠近放置時，應留有間距。這種間距對有運動控制問題的人有益，他們可能會不小心啟用錯誤的互動內容。
可以使用 CSS 屬性（例如 margin）建立間距。
ARIA 狀態資訊
要描述按鈕的狀態，正確的 ARIA 屬性是 aria-pressed，而不是 aria-checked 或 aria-selected。要了解更多資訊，請閱讀有關 ARIA 按鈕角色的資訊。
按鈕樣式
最好不要覆蓋具有焦點的元素的預設焦點環。如果覆蓋了按鈕樣式，則重要的是要確保焦點狀態具有足夠的對比度，以便視力低下的人可以感知它，並且有認知差異的人會理解它。
:focus-visible 偽類可用於僅在使用者代理的啟發式演算法確定應突出顯示焦點時（例如，當 <button> 接收到鍵盤焦點時）將樣式應用於具有 :focus 的元素。有關更多資訊，請參閱 :focus vs :focus-visible。
顏色對比度由比較按鈕文字和背景顏色值的亮度與按鈕放置的背景的亮度來確定。為了滿足當前的Web 內容可訪問性指南 (WCAG)，文字內容的比例要求為 4.5:1，大文字的比例要求為 3:1。（大文字定義為 18.66 畫素及粗體或更大，或 24 畫素或更大。）
點選和焦點
點選 <button> 或 <input> 按鈕型別是否（預設情況下）導致其獲得焦點因瀏覽器和作業系統而異。大多數瀏覽器都會將焦點賦予被點選的按鈕，但 Safari 在設計上不這樣做。
示例
建立一個基本按鈕
此示例建立一個可點選的按鈕。type="button" 屬性確保按鈕沒有預設行為。您可以使用 JavaScript 或 command 和 commandfor 等屬性使此按鈕具有互動性。
<button type="button" name="button">I'm a button</button>
使用 command 屬性的 request-close 值
此示例中的對話方塊有兩個單選按鈕，用於控制對話方塊是否可以關閉。選擇是或否，然後點選請求關閉以嘗試關閉對話方塊。如果選擇是，對話方塊將關閉；如果選擇否，對話方塊將保持開啟狀態並顯示一條訊息。
<button type="button" commandfor="mydialog" command="show-modal">
Open Dialog
</button>
<dialog id="mydialog">
<div class="wrapper">
<form>
<fieldset>
<legend>Allow this dialog to close when requested?</legend>
<div>
<input type="radio" id="no" name="close" value="no" checked />
<label for="no">No</label>
</div>
<div>
<input type="radio" id="yes" name="close" value="yes" />
<label for="yes">Yes</label>
</div>
</fieldset>
</form>
<button commandfor="mydialog" command="request-close">
Request to Close
</button>
<p class="warning" hidden>You must choose "Yes" to close this dialog.</p>
</div>
</dialog>
const dialog = document.querySelector("dialog");
const radio = document.querySelector("form").elements["close"];
const warning = document.querySelector(".warning");
dialog.addEventListener("cancel", (e) => {
if (!e.cancelable) return;
if (radio.value === "no") {
warning.hidden = false;
e.preventDefault();
} else {
warning.hidden = true;
}
});
開啟對話方塊按鈕使用 command="show-modal" 開啟 <dialog> 元素。
請求關閉按鈕具有 command="request-close"，它使用 commandfor="mydialog" 屬性定位 <dialog> 元素。當點選它時，它會詢問 <dialog> 是否可以關閉（與 command="close" 屬性不同，後者會立即關閉 <dialog>）。這會使用 cancel 事件檢查 <dialog> 是否可取消。
當事件是 cancelable 時，會檢查單選按鈕的值
- 如果設定為
yes，對話方塊將關閉。 - 如果設定為
no，則警告上的hidden屬性將關閉，並呼叫preventDefault()方法，這會阻止預設的<dialog>關閉行為。
技術摘要
| 內容類別 | 流內容、短語內容、互動式內容、列出、可標記和可提交表單關聯元素，可感知內容。 |
|---|---|
| 允許內容 |
短語內容但不能有互動式內容。如果 <button> 是可定製選擇元素的第一個子元素，則它還可以包含零個或一個 <selectedcontent> 元素。 |
| 標籤省略 | 無，起始標籤和結束標籤都必須存在。 |
| 允許父級 | 任何接受短語內容的元素。 |
| 隱式 ARIA 角色 |
button
|
| 允許的 ARIA 角色 |
checkbox、combobox、link、menuitem、menuitemcheckbox、menuitemradio、option、radio、switch、tab |
| DOM 介面 | HTMLButtonElement |
規範
| 規範 |
|---|
| HTML # 按鈕元素 |
瀏覽器相容性
載入中…