HTML Input 元件 2

 ※ 來源：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 已被棄用）。

---------------------------------------------------------------------
範例截圖：

HTML List

◆ 基本元件／基本元素
　　・Input  [01], [02]


◆ 表格
　　・表格第一列及第一行固定不動


◆

HTML Input 元件 1

 ※ 來源：GaiO

HTML <input> 標籤共有超過 20 種以上的 type 屬性，用來接收不同類型的使用者輸入。 [1]

主要的 type 類型可分為以下幾類：

文字與基礎輸入
• text：單行文字輸入欄位（預設值）。
• password：密碼輸入欄位，輸入內容會以隱藏字元（如黑點）顯示。
• textarea：多行文字輸入（雖然是獨立標籤，但常與 input 搭配理解）。 [1, 2, 3]
選項與按鈕
• checkbox：核取方塊（多選）。
• radio：單選按鈕（通常同組的 name 屬性需相同）。
• submit：送出表單按鈕。
• reset：重置表單按鈕。
• button：一般按鈕（通常搭配 JavaScript 觸發事件）。 [1, 2, 3]
HTML5 新增的特殊輸入格式
• email、url、tel：分別針對電子郵件、網址及電話號碼的輸入欄位，行動裝置上會切換對應的虛擬鍵盤。
• number：數字輸入欄位，可設定最大、最小值。
• range：滑桿選擇器。
• date / time / datetime-local：日期與時間選擇器。
• color：色彩選擇器。
• search：搜尋欄位，通常帶有清除按鈕。 [1, 2, 3, 4]
其他
• file：檔案上傳 (兼用Javascript 可預覽圖片)。
• image：點按圖片上傳。
• hidden：隱藏欄位，使用者看不到，常用於傳遞背景資料（如 ID 或 token）。 [1, 2]

參考 MDN <input> 官方文件 了解各類型的完整屬性與支援度。

-----------------------------------------------------------------------------------------------------------------------------
範例截圖：