學習要點：
1.type 屬性總彙
2.type 屬性解析
主講教師：李炎恢
本章主要探討 HTML5 中表單中 input 元素的 type 屬性，根據不同的值來顯示不同的輸入框。
一．type 屬性總彙
input 元素可以用來生成一個供使用者輸入資料的簡單文字框。在預設的情況下，什麼樣的資料均可以輸入。而通過不同的屬性值，可以限制輸入的內容。
|
屬性名稱 |
說明 |
|
text |
一個單行文字框，預設行為 |
|
password |
隱藏字元的密碼框 |
|
search |
搜尋框，在某些瀏覽器鍵入內容會出現叉標記取消 |
|
submit、reset、button |
生成一個提交按鈕、重置按鈕、普通按鈕 |
|
number、range |
只能輸入數值的框；只能輸入在一個數值範圍的框 |
|
checkbox、radio |
核取方塊，使用者勾選框；單選框，只能在幾個中選一個 |
|
image、color |
生成一個圖片按鈕，顏色程式碼按鈕 |
|
email、tel、url |
生成一個檢測電子郵件、號碼、網址的文字框 |
|
date、month、time、week、datetime、datetime-local |
獲取日期和時間 |
|
hidden |
生成一個隱藏控制元件 |
|
file |
生成一個上傳控制元件 |
二．input 元素解析
1.type 為 text 值時
<input type="text">
解釋：當 type 值為 text 時，呈現的就是一個可以輸入任意字元的文字框，這也是預設行為。並且，還提供了一些額外的屬性。
|
屬性名稱 |
說明 |
|
list |
指定為文字框提供建議值的 datalist 元素，其值為datalist 元素的 id 值 |
|
maxlength |
設定文字框最大字元長度 |
|
pattern |
用於輸入驗證的正規表示式 |
|
placeholder |
輸入字元的提示 |
|
readonly |
文字框處於只讀狀態 |
|
disabled |
文字框處於禁用狀態 |
|
size |
設定文字框寬度 |
|
value |
設定文字框初始值 |
|
required |
表明使用者必須輸入一個值，否則無法通過輸入驗證 |
//設定文字框長度
<input type="text" size="50">
//設定文字框輸入字元長度
<input type="text" maxlength="10">
//設定文字框的初始值
<input type="text" value="初始值">
//設定文字框輸入提示
<input type="text" placeholder="請輸入內容">
//設定文字提供的建議值
<input list="footlist"> <datalist id="footlist"> <option value="蘋果">蘋果</option> <option value="桔子">桔子</option> <option value="香蕉" label="香蕉"> <option value="梨子"> </datalist>
//設定文字框內容為只讀，可以提交資料
<input type="text" readonly>
//設定文字框內容不可用，不可以提交資料
<input type="text" disabled>
2.type 為 password 值時
<input type="password">
解釋：當 type 值為 password 時，一般用於密碼框的輸入，所有的字元都會顯示星號。密碼框也有一些額外屬性。
|
屬性名稱 |
說明 |
|
maxlength |
設定密碼框最大字元長度 |
|
pattern |
用於輸入驗證的正規表示式 |
|
placeholder |
輸入密碼的提示 |
|
readonly |
密碼框處於只讀狀態 |
|
disabled |
文字框處於禁用狀態 |
|
size |
設定密碼框寬度 |
|
value |
設定密碼框初始值 |
|
required |
表明使用者必須輸入同一個值 |
這裡除了正則和驗證需要放在下一節，其餘和文字框一致。
3.type 為 search 時
<input type="search">
解釋：和文字框一致，在除 Firefox 瀏覽器的其他現代瀏覽器，會顯示一個叉來取消搜尋內容。額外屬性也和 text 一致。
4.type 為 number、range 時
<input type="number"> <input type="range">
解釋：只限輸入數字的文字框，不同瀏覽器可能顯示方式不同。生成一個數值範圍文字框，只是樣式是拖動式。額外屬性如下：
|
屬性名稱 |
說明 |
|
list |
指定為文字框提供建議值的 datalist 元素，其值為datalist 元素的 id 值 |
|
min |
設定可接受的最小值 |
|
max |
設定可接受的最大值 |
|
readonly |
設定文字框內容只讀 |
|
required |
表明使用者必須輸入一個值，否則無法通過輸入驗證 |
|
step |
指定上下調節值的步長 |
|
value |
指定初始值 |
//範圍和步長
<input type="number" step="2" min="10" max="100">
5.type 為 date 系列時
<input type="date"> <input type="month"> <input type="time"> <input type="week"> <input type="datetime"> <input type="datetime-local">
解釋：實現文字框可以獲取日期和時間的值，但支援的瀏覽器不完整。我們測試 Chrome 和 Opera 支援，其他瀏覽器尚未支援。所以，在獲取日期和時間，目前還是推薦使用 jQuery 等前端庫來實現日曆功能。額外屬性和 number 一致。
6.type 為 color 時
<input type="color">
解釋：實現文字框獲取顏色的功能，最新的現代瀏覽器測試後 IE 不支援，其餘的都能顯示一個顏色對話方塊提供選擇。
7.type 為 checkbox、radio 時
音樂<input type="checkbox"> 體育<input type="checkbox"> <input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女"> 女
解釋：生成一個獲取布林值的核取方塊或固定選項的單選框。額外屬性如下：
|
屬性名稱 |
說明 |
|
checked |
設定核取方塊、單選框是否為勾選狀態 |
|
required |
表示使用者必須勾選，否則無法通過驗證 |
|
value |
設定核取方塊、單選框勾選狀態時提交的資料。預設為 on |
//預設勾選，預設值為 1
<input type="checkbox" name="music" checked value="1">
8.type 為 submit、reset 和 button 時
<input type="submit">
解釋：生成一個按鈕，三種模式：提交、重置和一般按鈕，和<button>元素相同。
|
值名稱 |
說明 |
|
submit |
生成一個提交按鈕 |
|
reset |
生成一個重置按鈕 |
|
button |
生成一個普通按鈕 |
如果是 submit 時，還提供了和<button>元素一樣的額外屬性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。
9.type 為 image 時
<input type="image" src="img.png">
解釋：生成一個圖片按鈕，點選圖片就實現提交功能，並且傳送了分割槽響應資料。圖片按鈕也提供了一些額外屬性。
|
屬性名稱 |
說明 |
|
src |
指定要顯示影象的 URL |
|
alt |
提供圖片的文字說明 |
|
width |
影象的長度 |
|
height |
影象的高度 |
|
提交額外屬性 |
formaction、formenctype、formmethod、formtarget和 formnovalidate。 |
10.type 為 email、tel、url 時
<input type="email"> <input type="tel"> <input type="url">
解釋：email 為電子郵件格式、tel 為電話格式、url 為網址格式。額外屬性和 text 一致。但對於這幾種型別，瀏覽器支援是不同的。email 支援比較好，現在瀏覽器都支援格式驗證；tel 基本不支援；url 支援一般，部分瀏覽器只要檢測到 http://就能通過。
11.type 為 hidden 時
<input type="hidden">
解釋：生成一個隱藏控制元件，一般用於表單提交時關聯主鍵 ID 提交，而這個資料作為隱藏存在。
12.type 為 file 時
<input type="file">
解釋：生成一個檔案上傳控制元件，用於檔案的上傳。額外提供了一些屬性：
|
屬性名稱 |
說明 |
|
accept |
指定接受的 MIME 型別 |
|
required |
表明使用者必須提供一個值，否則無法通過驗證 |
accept="image/gif, image/jpeg, image/png"