Skip to content

HTML 按鈕 button:三種 type 的差別與使用時機

HTML 按鈕元素 button:三種 type 的差別

<button> 預設為可以點擊的按鈕,與 <input type="button"> 相似。行為由 type 決定:submit 送出表單、reset 清除表單、button 什麼都不做,在表單裡沒指定就會意外送出。

小提醒

<button> 是比 <input> 更容易讓 CSS 控制的元素。原因如下:

  • 可以在此元素內加入其他標籤,讓按鈕更加生動、活潑。
  • CSS 偽元素 的使用,讓視覺更加活躍。

屬性

type

按鈕的類型設定。

類型名稱說明
button沒有特殊功能,通常配合 JavaScript 使用。
submit若外層有 <form> 存在,會進行送出表單內容。
reset若外層有 <form> 存在,會進行清除表單內容。

注意事項

如果按鈕不是直接將資料送至 Server 中,請確保為 type="button" 的屬性設定。否則,會有向 Server 發送資料並渲染畫面,導致原本畫面受到破壞的現象發生。

disabled

指定功能為不啟用的狀態。

按鈕還是超連結

目的該用的元素
前往另一個網址超連結 <a>
在原地觸發某個動作<button>

用超連結假裝成按鈕,會讓鍵盤與螢幕閱讀器的行為出錯,反之亦然。

常見問題

沒寫 type 的按鈕預設是什麼?

表單 裡預設是 submit。這也是為什麼按下某個只想觸發特效的按鈕,畫面卻整個重新整理。表單內的按鈕請一律明確寫上 type

button 和 input type="button" 差在哪?

<button> 可以在標籤內放圖示與其他元素,也能使用偽元素,樣式彈性大得多;<input> 只能靠 value 顯示純文字。新的專案幾乎都用 <button>

該用 button 還是超連結?

會前往另一個網址的用 超連結,在原地觸發某個動作的用按鈕。用超連結假裝成按鈕會讓鍵盤與螢幕閱讀器的行為出錯。

disabled 的按鈕要注意什麼?

它無法被點擊也無法被鍵盤聚焦,螢幕閱讀器的使用者可能完全察覺不到它的存在。長時間停用時,記得在畫面上說明為什麼不能按。

延伸閱讀