HTML 輸入欄位 input：type 與常用屬性總覽
<input> 主要用在 表單 互動中，以便接收來自使用者輸入的內容。且可依據表單元素不同的屬性，顯示出不同使用者介面與資料，type 就決定了它是文字框、密碼框還是核取方塊。不過瀏覽器的驗證只是體驗，不是防線。
屬性
type
不同的 type 值，會顯示不同使用者介面。
| 類型名稱 | 說明 |
|---|---|
text | 預設值，輸入單行文字。 |
email | 類似 text 輸入，且帶有瀏覽器上的參數驗證。 |
password | 單行輸入，從視覺上來觀察輸入的內容，會被取代成小黑點，以屏蔽輸入的內容。 |
number | 單行輸入，且只能是數字。 |
search | 用於輸入內容，在瀏覽器中會有刪除按鈕，用於清除輸入的內容。 |
tel | 單行輸入，且只能是數字。可用在電話號碼或手機號碼的輸入。 |
checkbox | 核取方塊、多選框，可設定該欄位為選取會未選取。 |
radio | 選項按鈕、單選按鈕，可設定該欄位為選取會未選取。 |
file | 選取檔案來源的使用者介面，加上 accept 可定義檔案來源的類型。 |
date | 西元、月、日的使用者介面。 |
time | 時間的使用者介面。 |
datetime-local | date、time 的集合體。 |
color | 指定色彩的使用者介面。 |
range | 用於水平拖動的使用者介面，加上 min、max 可定義範圍。 |
button | 按鈕，加上 value 屬性，可在按鈕上顯示 value 的值。 |
submit | 提交表單內容，加上 value 屬性，可在按鈕上顯示 value 的值。 |
reset | 表單內容重置為預設值，加上 value 屬性，可在按鈕上顯示 value 的值。 |
name
用來指定送出去的資料要用什麼名稱，目的是讓遠端伺服器透過明確定義好的名稱去取出對應的欄位值。在前、後端分離的趨勢下，已漸用 JavaScript 直接取到元素的值，已少用 name 來操作了。
<input type="text" name="FullName">value
可以利用此屬性取出使用者所輸入的值，亦可設定該表單元素的預設值。
disabled
禁用狀態。
readonly
唯讀狀態。
required
必填欄位。
<input type="text" name="FullName" value="" required>特定 type 才能使用的屬性
placeholder
顯示輸入的提示訊息。
適用類型：text、email、password、number、search、tel。
maxlength、minlength
輸入最多的文字數量、最少需要的文字數量。
適用類型：text、email、password、search、tel。
小提醒
原始碼呈現水平向右發展可節省文件的行數。若屬性的設定太多，亦會導致原始碼檢視與維護不易。因此，可適時為屬性進行換行保持可維護性。
checked
checked 可以設定 checkbox、radio 網頁上初始化的選取狀態。
適用類型：checkbox、radio。
定義單選的選項按鈕
一個單選的選項按鈕是由多個相同 name 屬性的選項按鈕所組成，也就是群組的概念。一旦單選按鈕群組被建立，選取該群組內的任何一個選項按鈕，也會自動取消同群內內前次被選取的按鈕。
表單驗證只是體驗，不是防線
required、minlength、type="email" 這些內建驗證能在送出前擋下明顯的錯誤，讓使用者少跑一趟。但它們全都在瀏覽器端執行，任何人都能繞過，資料的正確性與安全性仍必須由後端把關。
常見問題
disabled 和 readonly 有什麼差別？
readonly 的欄位不能編輯，但仍會隨表單送出；disabled 的欄位不能編輯也不會被送出，而且無法用鍵盤聚焦。要讓後端收到值就用 readonly。
placeholder 可以取代 label 嗎？
不行。使用者開始輸入後提示就消失了，螢幕閱讀器對它的支援也不一致。placeholder 是補充範例，欄位名稱請一律用 <label>。
radio 為什麼點了不會互斥？
同一組單選按鈕要有相同的 name 才會被視為一組。name 不同就是各自獨立的按鈕，自然不會互相取消。
input 需要寫結束標籤嗎？
不需要。它是沒有內容的 空元素，只有一個標籤，也不能包任何內容。
有了瀏覽器內建驗證，還需要後端驗證嗎？
絕對需要。前端驗證只是提升使用體驗，任何人都能繞過它直接送出請求，資料的正確性與安全性仍必須由後端把關。
