<button>：按鈕元素

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015 .

* Some parts of this feature may have varying levels of support.

<button> HTML 元素是一個由使用者使用滑鼠、鍵盤、手指、語音命令或其他輔助技術啟動的互動元素。一旦啟動，它將執行一個動作，例如提交一個 表單 或打開對話框。

預設情況下，HTML 按鈕會呈現為與 使用者代理 所在平台類似的樣式，但你可以使用 CSS 更改按鈕的外觀。

嘗試一下 

<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> 元素的 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 相同。

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

    popovertarget

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

    popovertargetaction

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

    "hide"

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

    "show"

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

    "toggle"

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

    按鈕的默認行為。可能的值為：

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

    範例

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