※ 來源:Bing (少一個圖片上傳)
在 HTML 中,<input> 元素的 type 屬性決定了輸入欄位的類型與行為。
HTML5 之後,type 的種類大幅增加,目前常見的類型如下(共 20+ 種):
文字與數據類
| 類型 | 說明 |
|---|---|
text | 單行文字輸入(預設值) |
password | 密碼輸入(隱藏字元) |
email | 電子郵件格式驗證 |
url | 網址格式驗證 |
tel | 電話號碼(不會自動驗證格式) |
search | 搜尋框(部分瀏覽器會加上清除按鈕) |
number | 數字輸入(可設定 min、max、step) |
日期與時間類
| 類型 | 說明 |
|---|---|
date | 年-月-日 |
time | 時:分(可含秒) |
datetime-local | 本地日期與時間 |
month | 年-月 |
week | 年-週 |
選擇與控制類
| 類型 | 說明 |
|---|---|
checkbox | 多選框 |
radio | 單選框 |
range | 範圍滑桿(數值) |
color | 顏色選擇器 |
file | 檔案上傳 |
hidden | 隱藏欄位(不顯示在頁面上) |
按鈕類
| 類型 | 說明 |
|---|---|
button | 一般按鈕(需搭配 JS) |
submit | 提交表單 |
reset | 重設表單 |
✅ 總結:
HTML5 規範中,<input> 的 type 屬性共有 23 種主要類型(部分瀏覽器可能不完全支援,例如 datetime 已被棄用)。
---------------------------------------------------------------------
範例截圖:

