HTML 按鈕 button:三種 type 的差別與使用時機
<button> 預設為可以點擊的按鈕,與 <input type="button"> 相似。行為由 type 決定:submit 送出表單、reset 清除表單、button 什麼都不做,在表單裡沒指定就會意外送出。
屬性
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 的按鈕要注意什麼?
它無法被點擊也無法被鍵盤聚焦,螢幕閱讀器的使用者可能完全察覺不到它的存在。長時間停用時,記得在畫面上說明為什麼不能按。