輸入 <input>

<input> 主要用在表單互動中，以便接收來自使用者輸入的內容。且可依據表單元素不同的屬性，顯示出不同使用者介面與資料。

屬性

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 屬性的選項按鈕所組成，也就是群組的概念。一旦單選按鈕群組被建立，選取該群組內的任何一個選項按鈕，也會自動取消同群內內前次被選取的按鈕。