你真的瞭解PCM嗎？
阿新 • • 發佈：2021-09-28
定製input元素
input元素可以用來生成一個供使用者輸入資料的簡單文字框。其缺點在於使用者在其中輸入什麼值都可以。有時這還不錯，但是有時設計者可能希望讓使用者輸入特定型別的資料。在後一種情況下，可以對input元素進行配置，改變其收集使用者資料的方式。要配置input元素需要用到其type屬性。在HTML5中該屬性有23個不同的值。在將type屬性設定為想要的值之後，input元素又有一些額外的屬性可供使用。該元素一共有30個屬性，其中許多屬性只能與特定的type屬性值搭配使用。
用input元素輸入文字
type屬性設定為text的input元素在瀏覽器中顯示為一個單行文字框。下表羅列了可用於這種型別的input元素的各種屬性。
text型input元素可用的額外屬性
| 屬 性 | 說 明 | 是否為HTML5新增 |
|---|---|---|
| dirname | 指定元素內容文字方向的名稱 | 是 |
| list | 指定為文字框提供建議值的datalist元素，其值為datalist元素的id值 | 是 |
| maxlength | 設定使用者可以在文字框中輸入的字元的最大數目 | 否 |
| pattern | 指定一個用於輸入驗證的正則表示式 | 是 |
| placeholder | 指定關於所需資料型別的提示 | 是 |
| readonly | 用來將文字框設為只讀以阻止使用者編輯其內容 | 否 |
| required | 表明使用者必須輸入一個值，否則無法通過輸入驗證 | 是 |
| size | 通過指定文字框中可見的字元數目設定其寬度 | 否 |
| value | 設定文字框的初始值 | 否 |
下面逐一說明這些屬性。
提示
如果要使用多行文字框，請使用textarea元素。
設定元素大小
有兩個屬效能夠對文字框的大小產生影響。maxlength屬性設定了使用者能夠輸入的字元的最大數目，size屬性則設定了文字框能夠顯示的字元數目。二者的字元數目均以正整數表示。程式碼清單1示範了這兩個屬性的用法。
程式碼清單1 使用maxlength和size屬性
<!DOCTYPE HTML> <html> <head> <title>黃子涵</title> <meta name="作者" content="黃子涵"/> <meta name="描述" content="黃子涵是帥哥！"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> </head> <body> <form method="post" action="http://120.77.46.246/form"> <p> <label for="name"> 黃子涵的姓名：<input maxlength="10" id="name" name="name"/> </label> </p> <p> <label for="city"> 黃子涵的城市：<input size="10" maxlength="10" id="city" name="city"/> </label> </p> <p> <label for="song"> 黃子涵的歌曲：<input size="10" maxlength="10" id="fave" name="fave"/> </label> </p> <button>黃子涵的按鈕</button> </form> </body> </html>
此例中第一個input元素的maxlength屬性被設定為10。瀏覽器可以自行確定該文字框在螢幕上佔據的寬度，但使用者最多隻能在其中輸入10個字元。如果使用者試圖輸入更多的字元，那麼瀏覽器會忽略多出的這些輸入內容。
第二個input元素的size屬性被設定為10。瀏覽器必須確保該文字框的寬度足以顯示10個字元。該屬性對使用者能夠輸入的字元數目未作限制。
第三個input元素同時設定了這兩個屬性，既確定了文字框在螢幕上的大小，又限制了使用者能夠輸入的字元數目。下圖顯示了這些屬性對顯示效果和傳送給伺服器的資料項的影響。
上圖中使用的瀏覽器是Firefox，這是因為我最愛用的Chrome沒有正確實現size屬性。細看傳送到伺服器的資料，會發現city這項資料所含字元比螢幕上顯示的多。這是因為size屬性不會限制使用者能夠輸入的字元數，只會限制瀏覽器所能顯示的字元數。
設定初始值和佔位式提示
先前的例子中的文字框在文件剛載入時都是空的，不過它們不是非這樣不可。設計者可以用value屬性設定一個預設值，還可以用placeholder屬性設定一段提示文字，告訴使用者應該輸入什麼型別的資料。程式碼清單2示範了這些屬性的用法。
程式碼清單2 使用value和placeholder屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://120.77.46.246/form">
<p>
<label for="name">
黃子涵的姓名：<input placeholder="你的名字是什麼？" id="name" name="name"/>
</label>
</p>
<p>
<label for="city">
黃子涵的籍貫：<input placeholder="你的籍貫是什麼？" id="city" name="city"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="青花瓷" id="fave" name="fave"/>
</label>
</p>
<button>黃子涵的按鈕</button>
</form>
</body>
</html>
如果需要使用者輸入資料，而且想提示使用者應該輸入什麼樣的資料，那就應該使用placeholder屬性。如果想要提供一個預設值————不管是因為使用者之前提供過該資訊，還是因為這是一個可能會被接受的常見選擇，那就應該使用value屬性。瀏覽器使用這些屬性值的方式如下圖所示。
提示
用button元素重置表單時，瀏覽器會恢復文字框中的佔位式提示和預設值。
使用資料列表
可以將input元素的list屬性設定為一個datalist元素的id屬性值，這樣使用者在文字框中輸入資料時只消從後一元素提供的一批選項中進行選擇就行了。下表概括了datalist元素。
datalist元素
datalist元素是HTML5中新增的，它可以用來提供一批值，以便幫助使用者輸入需要的資料。不同型別的input元素使用datalist元素的方式略有差異。對於text型input元素，datalist元素提供的值以自動補全建議值的方式呈現。提供給使用者選擇的值各用一個option元素指定。下表概括了option元素。
提示
select和optgroup元素時還會再次提到option元素。
option元素
程式碼清單3示範瞭如何用datalist和option元素為文字框準備好一批值。
程式碼清單3 使用datalist元素
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://120.77.46.246/form">
<p>
<label for="name">
黃子涵的姓名：<input placeholder="你的名字是什麼？" id="name" name="name"/>
</label>
</p>
<p>
<label for="city">
黃子涵的籍貫：<input placeholder="你的籍貫是什麼？" id="city" name="city"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input list="歌曲列表" id="song" name="song"/>
</label>
</p>
<button>黃子涵的按鈕</button>
<datalist id="歌曲列表">
<option value="青花瓷"/>
<option value="龍捲風">周杰倫的龍捲風</option>
<option value="不能說的祕密">
</datalist>
</form>
</body>
</html>
包含在datalist元素中的每一個option元素都代表一個供使用者選擇的值。其value屬性值在該元素代表的選項被選中時就是input元素所用的資料值。顯示在選擇列表中的未必是option元素的value屬性值，還可以是另行設定的一條說明資訊。它可以用label屬性設定，也可以作為。ption元素的內容設定。在程式碼清單3中值為Apples和Oranges的兩個option元素就是這樣做的。下圖顯示了瀏覽器處理定義在datalist中的option元素的方式。
使用這種text型input元素時要注意：如果某個option元素的內容或label值與其value值不同，那麼使用者可能會搞不懂為什麼點選Lovely Apples結果卻是在文字框中輸入Appleso有些瀏覽器（如Opera）對這種情況採用的處理方式略有不同，如下圖所示。
這種處理方式略有進步（注意：它只檢查了option元素的label屬性，沒管其內容），不過還是難免讓人糊塗。
生成只讀或被禁用的文字框
readonly和disabled屬性都可以用來生成使用者不能編輯的文字框，其結果的外觀不同。程式碼清單4示範了這兩個屬性的用法。
程式碼清單4 使用readonly和disabled屬性
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://120.77.46.246/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="city">
黃子涵的籍貫：<input value="廣東湛江" readonly id="city" name="city"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input list="歌曲列表" id="song" name="song"/>
</label>
</p>
<button>黃子涵的按鈕</button>
<datalist id="歌曲列表">
<option value="青花瓷"/>
<option value="龍捲風">周杰倫的龍捲風</option>
<option value="不能說的祕密">
</datalist>
</form>
</body>
</html>
其結果如下圖所示。
程式碼清單4中的第一個input元素設定了disabled屬性，結果該文字框顯示為灰色，而且使用者不能編輯其中的文字。第二個input元素設定了readonly屬性，這也會阻止使用者編輯文字框中的文字，但不會影響其外觀。提交表單後，看看傳送給伺服器的資料有什麼不同，結果如下圖所示。
注意，設定了disabled屬性的input元素的資料沒有被提交到伺服器。如果既要用這個屬性又想把資料發到伺服器，那麼應該考慮使用hidden型input元素。
readonly屬性要謹慎使用。雖然使用這個屬性的input元素的資料能夠發給伺服器，但是沒有什麼視覺訊號告訴使用者該文字框已禁止編輯。瀏覽器不會理會使用者的輸入操作，這會讓使用者困惑。
指定文字方向資料的名稱
通過設定dirname屬性，可以將使用者輸入文字的方向資料傳送給伺服器，該屬性的值就是方向資料項的名稱。
用input元素輸入密碼
type屬性值設定為password的input元素用於輸入密碼。使用者輸入的字元在這種文字框中顯示為星號（
*）之類的掩飾字元。下表羅列了input元素在type屬性被設定為password時可用的一些額外屬性。這些屬性text型input元素也有，而且用法相同。
password型input元素可用的額外屬性
| 屬 性 | 說 明 | 是否為HTML5新增 |
|---|---|---|
| maxlength | 設定使用者可以在密碼框中輸入的字元的最大數目 | 否 |
| pattern | 指定一個用於輸入驗證的正則表示式 | 是 |
| palceholder | 指定關於所需資料型別的提示 | 是 |
| readonly | 將密碼框設為只讀以阻止使用者編輯其中的內容 | 否 |
| required | 表明使用者必須輸入一個值，否則無法通過輸入驗證 | 是 |
| size | 通過指定密碼框中可見的字元數目設定其寬度 | 否 |
| value | 設定初始密碼值 | 否 |
程式碼清單5示範了password型input元素的用法。
程式碼清單5 使用password型input元素
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://120.77.46.246/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<button>黃子涵的按鈕</button>
</form>
</body>
</html>
在上面的程式碼清單中，那個password型input元素還設定了placeholder屬性，用以提示使用者所需的是什麼樣的密碼。使用者輸入密碼的時候，瀏覽器會清除文字框中的佔位式提示並將每一個密碼字元顯示為圓點（具體使用的掩飾字元因瀏覽器而異）。其效果如下圖所示。
有一件事讀者想必都明白，不過我還是要提一句：在此過程中使用者輸入的內容只是顯示為掩飾字元，而不是被替換為掩飾字元。提交表單時，伺服器收到的是明文密碼。下圖顯示了來自Node.js指令碼的反饋資訊。
警告
在提交表單時password型input元素不會對密碼加以保護，使用者輸入的值以明文傳輸。對於安全至關重要（理應如此）的網站和應用系統，應該考慮使用SSL/HTTPS對瀏覽器和伺服器之間的通訊內容加密。
用iput元素生成按鈕
將input元素的type屬性設定為submit、reset和button會生成類似button元素那樣的按鈕。下表概括了這三種類型的input元素。
幾種用來生成按鈕的input元素型別
| type屬性值 | 說 明 | 可用的額外屬性 |
|---|---|---|
| submit | 生成用來提交表單的按鈕 | formaction、formenctype、formmethod、formtarget和formnovalidate |
| reset | 生成用來重置表單的按鈕 | 無 |
| button | 生成不執行任何操作的按鈕 | 無 |
submit型i叩ut元素可用的額外屬性與button元素的同名屬性用法相同。這些屬性的說明和演 示參見第12章。reset和button型i叩ut元素沒有定義任何額外的屬性。
上述三類input元素生成的按鈕上的說明文字均來自它們的value屬性值，如程式碼清單13-6所示。
程式碼清單6 用input元素生成按鈕
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://120.77.46.246/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<input type="submit" value="提交給黃子涵"/>
<input type="reset" value="黃子涵讓它重置"/>
<input type="button" value="黃子涵的按鈕"/>
</form>
</body>
</html>
這些按鈕的顯示結果如下圖所示。從圖中可以看到，它們與用button元素生成的按鈕外觀上並無二致。
用input元素生成按鈕與用button元素的不同之處在於後者可以用來顯示含標記的文字。有些較陳舊的瀏覽器（比如IE6）不能正確處理button元素，所以很多網站都更傾向於用input元素生成按鈕————各瀏覽器對這個元素的處理方式向來都比較一致。
用input元素為輸入資料把關
input元素的type屬性在HTML5中新增的一些值可以對使用者輸入的資料型別提出更具體的要求。隨後的各節將分別介紹一個這類type屬性值並演示其用法。下表概括了這些type屬性值。
用於輸入受限資料的input元素的type屬性值
| 屬 性 | 說 明 | 是否為HTML5新増 |
|---|---|---|
| checkbox | 將輸入限制為在一個“是/否”二態複選框中進行選擇 | 否 |
| color | 只能輸入顏色資訊 | 是 |
| date | 只能輸入日期 | 是 |
| datetime | 只能輸入帶時區資訊的世界時（包括日期和時間） | 是 |
| datetime-local | 只能輸入不帶時區資訊的世界時（包括日期和時間） | 是 |
| 只能輸入規範的電子郵箱地址 | 是 | |
| month | 只能輸入年和月 | 是 |
| number | 只能輸入整數或浮點數 | 是 |
| radiobutton | 將輸入限制為在一組固定選項中進行選擇 | 否 |
| range | 只能輸入指定範圍內的數值 | 是 |
| tel | 只能輸入規範的電話號碼 | 是 |
| time | 只能輸入時間資訊 | 是 |
| week | 只能輸入年及星期資訊 | 是 |
| url | 只能輸入完全限定的URL | 是 |
這一系列型別的input元素中有些能用明顯的視覺訊號告訴使用者對輸入或選擇的資料有什麼限制（例如checkbox型和radiobutton型input元素）；而像email型和url型等其他型別input元素則只能依靠輸入檢查功能。
用input元素獲取數值
type屬性設定為number的input元素生成的輸入框只接受數值。有些瀏覽器（如Chrome）還會在旁邊顯示用來上調和下調數值的箭頭形小按鈕。下表介紹了這種型別的input元素可用的額外屬性。
number型input元素可用的額外屬性
| 屬 性 | 說 明 | 是否為HTML5新增 |
|---|---|---|
| list | 指定為文字框提供建議值的datalist元素。其值為datalist元素的id值。 | 是 |
| min | 設定可接受的最小值（也是下調按鈕〔如果有的話〕的下限）以便進行輸入驗證。 | 是 |
| max | 設定可接受的最大值（也是上調按鈕〔如果有的話〕的上限）以便進行輸入驗證。 | 是 |
| readonly | 用來將文字框設定為只讀以阻止使用者編輯其內容。 | 否 |
| required | 表明使用者必須輸入一個值，否則無法通過輸入驗證。 | 是 |
| step | 指定上下調節數值的步長 | 是 |
| value | 指定元素的初始值 | 否 |
min、max、step和value屬性值可以是整數或小數，如3和3.14都是有效值。程式碼清單7示範了number型input元素的用法。
程式碼清單7 使用number型input元素
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://120.77.46.246/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：
<input type="number" step="1" min="0" max="100" value="1" id="mark" name="mark"/>
</label>
</p>
<input type="submit" value="提交給黃子涵吧">
</form>
</body>
</html>
程式碼清單7中添加了一個number型input元素，要求使用者提供其愛吃的水果在當地的價格。該元素的最小值、最大值、步長和初始值分別設定為1、100、1和1，其顯示效果如下圖所示。圖中既有Firefbx的截圖又有Chrome的截圖。注意Chrome還顯示了用來調節數值的箭頭形小按鈕，而Firefox中沒有這個東西。
用input元素獲取指定範圍內的數值
獲取數值的另一種辦法是使用range型input元素。使用者只能用它從事先規定的範圍內選擇一個數值。range型input元素支援的屬性與number型相同，但二者在瀏覽器中的顯示結果不同。程式碼清單8示範了range型input元素的用法。
程式碼清單8 使用range型input元素
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://120.77.46.246/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：1
<input type="range" step="1" min="0" max="100" value="1" id="mark" name="mark"/>100
</label>
</p>
<input type="submit" value="提交給黃子涵吧">
</form>
</body>
</html>
其顯示結果見下圖。
用input元素獲取布林型輸入
checkbox型input元素會生成供使用者選擇是或否的複選框。這種型別的input元素支援的額外屬性如下表所述。
checkbox型input元素可用的額外屬性
| 屬 性 | 說 明 | 是否為HTML5新增 |
|---|---|---|
| checked | 設定了該屬性的複選框剛顯示出來時或重置表單後呈勾選狀態 | 否 |
| required | 表示使用者必須勾選該複選框，否則無法通過輸入驗證。 | 是 |
| value | 設定在複選框呈勾選狀態時提交給伺服器的資料值。預設為on | 否 |
程式碼清單9示範了checkbox型input元素的用法。
程式碼清單9 用input元素生成複選框
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://192.168.1.102/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：1
<input type="range" step="1" min="0" max="100" value="1" id="mark" name="mark"/>100
</label>
</p>
<P>
<label for="handsome">
黃子涵是不是帥哥：<input type="checkbox" id="handsome" name="handsome"/>
</label>
</P>
<input type="submit" value="提交給黃子涵吧">
</form>
</body>
</html>
其顯示結果如下圖所示o
checkbox型input元素的不足之處在於：提交表單時，只有處於勾選狀態的複選框的資料值會發送給伺服器。因此，要是表單狀態在如下圖時提交它，那麼從Node.js指令碼得到的反饋結果會是下圖中的樣子。
注意，圖中能看到密碼框的值，但找不到複選框的值。checkbox型input元素的資料項如果不存在，那就表明使用者沒有勾選這個複選框；反之，該資料項如果存在，那就表明使用者勾選了這個複選框，如下圖所示。
用input元素生成一組固定選項
radio型input元素可以用來生成一組單選按鈕，供使用者從一批固定的選項中作出選擇。它適合於可用有效資料不多的情況。下表介紹了這種型別的input元素支援的額外屬性。
radio型input元素可用的額外屬性
| 屬 性 | 說 明 | 是否為HTML5新増 |
|---|---|---|
| checked | 設定了該屬性的單選按鈕剛顯示出來時或重置表單後呈選定狀態 | 否 |
| required | 表示使用者必須在一組單選按鈕中選擇一個，否則無法通過輸入驗證。 | 是 |
| value | 設定在單選按鈕呈選定狀態時提交給伺服器的資料值 | 否 |
每一個radio型input元素代表著提供給使用者的一個選項。要生成一組互斥的選項，只消將所有相關input元素的name屬性設定為同一個值即可。程式碼清單10示範了這個做法。
程式碼清單10 用radio型input元素生成一組固定選項
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://192.168.1.102/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：1
<input type="range" step="1" min="0" max="100" value="1" id="mark" name="mark"/>100
</label>
</p>
<P>
<label for="handsome">
黃子涵是不是帥哥：<input type="checkbox" id="handsome" name="handsome"/>
</label>
</P>
<p>
<fieldset>
<legend>選出黃子涵喜歡的歌手</legend>
<label for="周杰倫">
<input type="radio" checked value="周杰倫" id="周杰倫" name="歌手"/>
周杰倫
</label>
<label for="陳奕迅">
<input type="radio" value="陳奕迅" id="陳奕迅" name="歌手"/>
陳奕迅
</label>
<label for="王菲">
<input type="radio" value="王菲" id="王菲" name="歌手"/>
王菲
</label>
<label for="林宥嘉">
<input type="radio" value="林宥嘉" id="林宥嘉" name="歌手"/>
林宥嘉
</label>
<label for="王力巨集">
<input type="radio" value="王力巨集" id="王力巨集" name="歌手"/>
王力巨集
</label>
<label for="五月天">
<input type="radio" value="五月天" id="五月天" name="歌手"/>
五月天
</label>
<label for="陳小春">
<input type="radio" value="陳小春" id="陳小春" name="歌手"/>
陳小春
</label>
<label for="周柏豪">
<input type="radio" value="周柏豪" id="周柏豪" name="歌手"/>
周柏豪
</label>
<label for="許嵩">
<input type="radio" value="許嵩" id="許嵩" name="歌手"/>
許嵩
</label>
<label for="蔡依林">
<input type="radio" value="蔡依林" id="蔡依林" name="歌手"/>
蔡依林
</label>
<label for="S.H.E">
<input type="radio" value="S.H.E" id="S.H.E" name="歌手"/>
S.H.E
</label>
<label for="李榮浩">
<input type="radio" value="李榮浩" id="李榮浩" name="歌手"/>
李榮浩
</label>
</fieldset>
</p>
<input type="submit" value="提交給黃子涵吧">
</form>
</body>
</html>
此例使用了三個radio型input元素。它們的name屬性都設定為fave，以便瀏覽器把它們關聯起來。這樣一來，選擇其中任何一個按鈕都會取消對另外兩個按鈕的選擇。這三個元素還設定了value屬性值，提交表單時選定按鈕的這個值會被髮送給伺服器。例中使用的fieldset和legend元素可以在視覺上把三個按鈕關聯在一起。第一個radio型input元素設定了checked屬性，這樣這組選項中就總有一個被選中。這些input元素在瀏覽器中的顯示結果如下圖所示。
此例中總有一個單選按鈕會被選中。要是沒有設定checked屬性而使用者又沒有作出任何選擇的話，就不會有哪個按鈕被選中。與checkbox型input元素類似：未選中的單選按鈕的值不會被髮給伺服器。因此整組單選按鈕中如果沒有一個被選中的話，伺服器就不會收到與其相關的資料項。
用input元素獲取有規定格式的字串
type屬性設定為email、tel和url的input元素能接受的輸入資料分別為有效的電子郵箱地址、電話號碼和URL。這三種input元素均支援下表所示的額外屬性。
email型、tel型和url型input元素可用的額外屬性
| 屬 性 | 說 明 | 是否為HTML新増 |
|---|---|---|
| list | 指定為文字框提供建議值的datalist元素，其值為datalist元素的id值 | 是 |
| maxlength | 設定使用者能夠在文字框中輸入的字元的最大數目 | 否 |
| pattern | 指定一個用於輸入驗證的正則表示式 | 是 |
| placeholder | 指定關於所需資料型別的提示 | 是 |
| readonly | 用來將文字框設為只讀以阻止使用者編輯其內容 | 否 |
| required | 表示使用者必須提供一個值，否則無法通過輸入驗證 | 是 |
| size | 通過指定文字框中可見的字元數目設定其寬度 | 否 |
| value | 指定元素的初始值。對於email型input元素，其值可能是單個郵箱地址，也可能是以逗號分隔的多個郵箱地址 | 否 |
email型input元素還支援一個名為multiple的屬性。設定了該屬性的input元素可以接受多個電子郵箱地址。程式碼清單11示範了這三種類型的input元素的用法。
程式碼清單11 使用email型、tel型和url型input元素
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://192.168.1.102/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：1
<input type="range" step="1" min="0" max="100" value="1" id="mark" name="mark"/>100
</label>
</p>
<P>
<label for="handsome">
黃子涵是不是帥哥：<input type="checkbox" id="handsome" name="handsome"/>
</label>
</P>
<p>
<label for="email">
黃子涵的電子郵箱：<input type="email" placeholder="[email protected]" id="email" name="email"/>
</label>
</p>
<p>
<label for="tel">
黃子涵的電話：<input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"/>
</label>
</p>
<p>
<label for="url">
黃子涵的個人網站：<input type="url" id="url" name="url"/>
</label>
</p>
<p>
<fieldset>
<legend>選出黃子涵喜歡的歌手</legend>
<label for="周杰倫">
<input type="radio" checked value="周杰倫" id="周杰倫" name="歌手"/>
周杰倫
</label>
<label for="陳奕迅">
<input type="radio" value="陳奕迅" id="陳奕迅" name="歌手"/>
陳奕迅
</label>
<label for="王菲">
<input type="radio" value="王菲" id="王菲" name="歌手"/>
王菲
</label>
<label for="林宥嘉">
<input type="radio" value="林宥嘉" id="林宥嘉" name="歌手"/>
林宥嘉
</label>
<label for="王力巨集">
<input type="radio" value="王力巨集" id="王力巨集" name="歌手"/>
王力巨集
</label>
<label for="五月天">
<input type="radio" value="五月天" id="五月天" name="歌手"/>
五月天
</label>
<label for="陳小春">
<input type="radio" value="陳小春" id="陳小春" name="歌手"/>
陳小春
</label>
<label for="周柏豪">
<input type="radio" value="周柏豪" id="周柏豪" name="歌手"/>
周柏豪
</label>
<label for="許嵩">
<input type="radio" value="許嵩" id="許嵩" name="歌手"/>
許嵩
</label>
<label for="蔡依林">
<input type="radio" value="蔡依林" id="蔡依林" name="歌手"/>
蔡依林
</label>
<label for="S.H.E">
<input type="radio" value="S.H.E" id="S.H.E" name="歌手"/>
S.H.E
</label>
<label for="李榮浩">
<input type="radio" value="李榮浩" id="李榮浩" name="歌手"/>
李榮浩
</label>
</fieldset>
</p>
<input type="submit" value="提交給黃子涵吧">
</form>
</body>
</html>
這三種input元素都顯示為普通文字框的樣子，它們只有在提交表單的時候才會檢查使用者輸入的資料。這是HTML5中新增的輸入資料檢查功能之一，至於檢查的效果則各有不同。所有主流瀏覽器都支援email型input元素，並能正確識別有效的電子郵箱地址。而url型input元素則時靈時不靈。有些瀏覽器會在使用者輸入的值前加上一個
http://了事； 有些瀏覽器會要求使用者輸入一個以http://開頭的值，但不會檢查後面的部分；還有一些瀏覽器乾脆來者不拒，把使用者輸入的任何值都拿去提交。瀏覽器對tel型input元素的支援是最差的。
用input元素獲取時間和日期
HTML5中增加了一些input元素的新型別，供使用者輸入日期和時間。下表介紹了這些型別的input元素。
用來獲取時間和日期的input元素型別
type屬性值 | 說 明 | 示 例
datetime | 獲取世界時日期和時間，包括時區資訊 | 2011-07-19T16:49:39.491Z
datetime-local | 獲取本地日期和時間（不含時區資訊） | 2011-07-19T16:49:39.491
date | 獲取本地日期（不含時間和時區資訊） | 2011-07-20
month | 獲取年月資訊（不含日、時間和時區資訊） | 2011-08
time | 獲取時間 | 17:49:44.746
week | 獲取當前星期 | 2011-W30
日期和時間是出了名的難纏的問題。很遺憾，有關這些新input元素型別的規範離理想狀態還有十萬八千里。規範中的日期格式來自時間戳格式規定得非常嚴格的RFC 3339（參見 http://tools.ietf.org/html/rfc3339 ）。這與實際使用中的（也是使用者料想的）許多地方性日期格式大相徑庭。例如，很少有人會知道datetime格式中的T表示時間段的開始，以及其中的Z表示Zulu時區。下表介紹的所有input元素型別都支援下表中的額外屬性。
用於輸入日期和時間的input元素可用的額外屬性
| 屬 性 | 說 明 | 是否為HTML5新増 |
|---|---|---|
| list | 指定為文字框提供建議值的datalist元素，其值為datalist元素的id值 | 是 |
| min | 設定可接受的最小值（也是下調按鈕［如果有的話］的下限）以便進行輸入驗證 | 是 |
| max | 設定可接受的最大值（也是上調按鈕〔如果有的話〕的上限）以便進行輸入驗證 | 是 |
| readonly | 用來將文字框設為只讀以阻止使用者編輯其內容 | 否 |
| required | 表示使用者必須提供一個值，否則無法通過輸入驗證 | 是 |
| step | 指定上下調節值的步長 | 是 |
| value | 指定元素的初始值 | 否 |
程式碼清單12示範了date型input元素的用法。
代瑪清單12 使用date型input元素
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://192.168.1.102/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：1
<input type="range" step="1" min="0" max="100" value="1" id="mark" name="mark"/>100
</label>
</p>
<P>
<label for="handsome">
黃子涵是不是帥哥：<input type="checkbox" id="handsome" name="handsome"/>
</label>
</P>
<p>
<label for="email">
黃子涵的電子郵箱：<input type="email" placeholder="[email protected]" id="email" name="email"/>
</label>
</p>
<p>
<label for="tel">
黃子涵的電話：<input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"/>
</label>
</p>
<p>
<label for="url">
黃子涵的個人網站：<input type="url" id="url" name="url"/>
</label>
</p>
<p>
<label for="lastsing">
黃子涵最近唱歌是什麼時候：<input type="date" id="lastsing" name="lastsing"/>
</label>
</p>
<p>
<fieldset>
<legend>選出你喜歡的歌手</legend>
<label for="周杰倫">
<input type="radio" checked value="周杰倫" id="周杰倫" name="歌手"/>
周杰倫
</label>
<label for="陳奕迅">
<input type="radio" value="陳奕迅" id="陳奕迅" name="歌手"/>
陳奕迅
</label>
<label for="王菲">
<input type="radio" value="王菲" id="王菲" name="歌手"/>
王菲
</label>
<label for="林宥嘉">
<input type="radio" value="林宥嘉" id="林宥嘉" name="歌手"/>
林宥嘉
</label>
<label for="王力巨集">
<input type="radio" value="王力巨集" id="王力巨集" name="歌手"/>
王力巨集
</label>
<label for="五月天">
<input type="radio" value="五月天" id="五月天" name="歌手"/>
五月天
</label>
<label for="陳小春">
<input type="radio" value="陳小春" id="陳小春" name="歌手"/>
陳小春
</label>
<label for="周柏豪">
<input type="radio" value="周柏豪" id="周柏豪" name="歌手"/>
周柏豪
</label>
<label for="許嵩">
<input type="radio" value="許嵩" id="許嵩" name="歌手"/>
許嵩
</label>
<label for="蔡依林">
<input type="radio" value="蔡依林" id="蔡依林" name="歌手"/>
蔡依林
</label>
<label for="S.H.E">
<input type="radio" value="S.H.E" id="S.H.E" name="歌手"/>
S.H.E
</label>
<label for="李榮浩">
<input type="radio" value="李榮浩" id="李榮浩" name="歌手"/>
李榮浩
</label>
</fieldset>
</p>
<input type="submit" value="提交給黃子涵吧">
</form>
</body>
</html>
支援這種新型input元素的瀏覽器曲指可數。
對這類input元素的支援接下來就算Chrome做得較好了。它會生成一個與number型input元素一樣的文字框。這種文字框帶有向上和向下的箭頭形的小按鈕，分別用來往後和往前調整時間。至於其他的瀏覽器，它們只是顯示一個單行文字框了事，讓使用者自已去琢磨該輸入些什麼。這樣的局面以後肯定會得到改觀，不過，在此之前最好還是求助於jQuery之類的主流JavaScript庫提供的日曆選擇工具。
用input元素獲取顏色值
color型input元素只能用來選擇顏色。這種型別的input元素還支援list屬性。這種input元素中的顏色值以7個字元的格式表示：以
#開頭，接下來是三個兩位十六進位制數, 它們分別代表紅、綠、藍三種原色的值（如#FF1234）。CSS中的顏色名（如red和black）不能用在這裡。程式碼清單13示範了這種input元素的用法。
程式碼清單13 使用color型input元素
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://192.168.1.102/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：1
<input type="range" step="1" min="0" max="100" value="1" id="mark" name="mark"/>100
</label>
</p>
<P>
<label for="handsome">
黃子涵是不是帥哥：<input type="checkbox" id="handsome" name="handsome"/>
</label>
</P>
<p>
<label for="email">
黃子涵的電子郵箱：<input type="email" placeholder="[email protected]" id="email" name="email"/>
</label>
</p>
<p>
<label for="tel">
黃子涵的電話：<input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"/>
</label>
</p>
<p>
<label for="url">
黃子涵的個人網站：<input type="url" id="url" name="url"/>
</label>
</p>
<p>
<label for="lastsing">
黃子涵最近唱歌是什麼時候：<input type="date" id="lastsing" name="lastsing"/>
</label>
</p>
<P>
<label for="color">
黃子涵的顏色：<input type="color" id="color" name="color"/>
</label>
</P>
<p>
<fieldset>
<legend>選出黃子涵喜歡的歌手</legend>
<label for="周杰倫">
<input type="radio" checked value="周杰倫" id="周杰倫" name="歌手"/>
周杰倫
</label>
<label for="陳奕迅">
<input type="radio" value="陳奕迅" id="陳奕迅" name="歌手"/>
陳奕迅
</label>
<label for="王菲">
<input type="radio" value="王菲" id="王菲" name="歌手"/>
王菲
</label>
<label for="林宥嘉">
<input type="radio" value="林宥嘉" id="林宥嘉" name="歌手"/>
林宥嘉
</label>
<label for="王力巨集">
<input type="radio" value="王力巨集" id="王力巨集" name="歌手"/>
王力巨集
</label>
<label for="五月天">
<input type="radio" value="五月天" id="五月天" name="歌手"/>
五月天
</label>
<label for="陳小春">
<input type="radio" value="陳小春" id="陳小春" name="歌手"/>
陳小春
</label>
<label for="周柏豪">
<input type="radio" value="周柏豪" id="周柏豪" name="歌手"/>
周柏豪
</label>
<label for="許嵩">
<input type="radio" value="許嵩" id="許嵩" name="歌手"/>
許嵩
</label>
<label for="蔡依林">
<input type="radio" value="蔡依林" id="蔡依林" name="歌手"/>
蔡依林
</label>
<label for="S.H.E">
<input type="radio" value="S.H.E" id="S.H.E" name="歌手"/>
S.H.E
</label>
<label for="李榮浩">
<input type="radio" value="李榮浩" id="李榮浩" name="歌手"/>
李榮浩
</label>
</fieldset>
</p>
<input type="submit" value="提交給黃子涵吧">
</form>
</body>
</html>
大多數瀏覽器都沒有為這種input元素提供特別的支援。Chrome會讓使用者輸入一個值，並在執行輸入驗證時報告發現的格式錯誤。這方面表現最出色的是Opera，它會顯示一個簡單的顏色選擇工具，該工具還能展開成一個完備的顏色選擇對話方塊，如下圖所示。
用input元素獲取搜尋用詞
search型input元素會生成一個單行文字框，供使用者輸入搜尋用詞。這種input元素有點與眾不同，它實際上什麼事都不做。它既不會對使用者輸入的資料作出限制，也沒有諸如搜尋本頁或藉助使用者的預設搜尋引擎進行搜尋這樣的功能。這類input元素支援的額外屬性與text型input元素相同，程式碼清單14示範了其用法。
程式碼清單14 使用search型input元素
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://192.168.1.102/form">
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：1
<input type="range" step="1" min="0" max="100" value="1" id="mark" name="mark"/>100
</label>
</p>
<P>
<label for="handsome">
黃子涵是不是帥哥：<input type="checkbox" id="handsome" name="handsome"/>
</label>
</P>
<p>
<label for="email">
黃子涵的電子郵箱：<input type="email" placeholder="[email protected]" id="email" name="email"/>
</label>
</p>
<p>
<label for="tel">
黃子涵的電話：<input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"/>
</label>
</p>
<p>
<label for="url">
黃子涵的個人網站：<input type="url" id="url" name="url"/>
</label>
</p>
<p>
<label for="lastsing">
黃子涵最近唱歌是什麼時候：<input type="date" id="lastsing" name="lastsing"/>
</label>
</p>
<P>
<label for="color">
黃子涵的顏色：<input type="color" id="color" name="color"/>
</label>
</P>
<p>
<label for="search">
把黃子涵找出來吧：<input type="search" id="search" name="search"/>
</label>
</p>
<p>
<fieldset>
<legend>選出黃子涵喜歡的歌手</legend>
<label for="周杰倫">
<input type="radio" checked value="周杰倫" id="周杰倫" name="歌手"/>
周杰倫
</label>
<label for="陳奕迅">
<input type="radio" value="陳奕迅" id="陳奕迅" name="歌手"/>
陳奕迅
</label>
<label for="王菲">
<input type="radio" value="王菲" id="王菲" name="歌手"/>
王菲
</label>
<label for="林宥嘉">
<input type="radio" value="林宥嘉" id="林宥嘉" name="歌手"/>
林宥嘉
</label>
<label for="王力巨集">
<input type="radio" value="王力巨集" id="王力巨集" name="歌手"/>
王力巨集
</label>
<label for="五月天">
<input type="radio" value="五月天" id="五月天" name="歌手"/>
五月天
</label>
<label for="陳小春">
<input type="radio" value="陳小春" id="陳小春" name="歌手"/>
陳小春
</label>
<label for="周柏豪">
<input type="radio" value="周柏豪" id="周柏豪" name="歌手"/>
周柏豪
</label>
<label for="許嵩">
<input type="radio" value="許嵩" id="許嵩" name="歌手"/>
許嵩
</label>
<label for="蔡依林">
<input type="radio" value="蔡依林" id="蔡依林" name="歌手"/>
蔡依林
</label>
<label for="S.H.E">
<input type="radio" value="S.H.E" id="S.H.E" name="歌手"/>
S.H.E
</label>
<label for="李榮浩">
<input type="radio" value="李榮浩" id="李榮浩" name="歌手"/>
李榮浩
</label>
</fieldset>
</p>
<input type="submit" value="提交給黃子涵吧">
</form>
</body>
</html>
瀏覽器可以設法用這種文字框的外觀表明它是用來獲取搜尋用詞的。Chrome的做法是先顯示一個標準的文字框，一旦使用者在其中輸入了內容，就再顯示一個取消圖示，如下圖所示。
用input元素生成隱藏的資料項
有時設計者會希望使用一些使用者看不到或不能編輯的資料項，但又要求提交表單時也能將其傳送給伺服器。下面舉個常見的例子。Web應用程式讓使用者檢視並編輯一些資料庫記錄時，往往需要用一種簡便易行的方法將主鍵儲存在網頁上以便知道使用者編輯的是哪條記錄，但是又不想讓使用者看到它。hidden型input元素可以用來達到這個目的。程式碼清單15示範了這種input元素的用法。
程式碼清單15 生成hidden型input元素
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://192.168.1.102/form">
<input type="hidden" name="recordID" value="1234"/>
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：1
<input type="range" step="1" min="0" max="100" value="1" id="mark" name="mark"/>100
</label>
</p>
<P>
<label for="handsome">
黃子涵是不是帥哥：<input type="checkbox" id="handsome" name="handsome"/>
</label>
</P>
<p>
<label for="email">
黃子涵的電子郵箱：<input type="email" placeholder="[email protected]" id="email" name="email"/>
</label>
</p>
<p>
<label for="tel">
黃子涵的電話：<input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"/>
</label>
</p>
<p>
<label for="url">
黃子涵的個人網站：<input type="url" id="url" name="url"/>
</label>
</p>
<p>
<label for="lastsing">
黃子涵最近唱歌是什麼時候：<input type="date" id="lastsing" name="lastsing"/>
</label>
</p>
<P>
<label for="color">
黃子涵的顏色：<input type="color" id="color" name="color"/>
</label>
</P>
<p>
<label for="search">
把黃子涵找出來吧：<input type="search" id="search" name="search"/>
</label>
</p>
<p>
<fieldset>
<legend>選出黃子涵喜歡的歌手</legend>
<label for="周杰倫">
<input type="radio" checked value="周杰倫" id="周杰倫" name="歌手"/>
周杰倫
</label>
<label for="陳奕迅">
<input type="radio" value="陳奕迅" id="陳奕迅" name="歌手"/>
陳奕迅
</label>
<label for="王菲">
<input type="radio" value="王菲" id="王菲" name="歌手"/>
王菲
</label>
<label for="林宥嘉">
<input type="radio" value="林宥嘉" id="林宥嘉" name="歌手"/>
林宥嘉
</label>
<label for="王力巨集">
<input type="radio" value="王力巨集" id="王力巨集" name="歌手"/>
王力巨集
</label>
<label for="五月天">
<input type="radio" value="五月天" id="五月天" name="歌手"/>
五月天
</label>
<label for="陳小春">
<input type="radio" value="陳小春" id="陳小春" name="歌手"/>
陳小春
</label>
<label for="周柏豪">
<input type="radio" value="周柏豪" id="周柏豪" name="歌手"/>
周柏豪
</label>
<label for="許嵩">
<input type="radio" value="許嵩" id="許嵩" name="歌手"/>
許嵩
</label>
<label for="蔡依林">
<input type="radio" value="蔡依林" id="蔡依林" name="歌手"/>
蔡依林
</label>
<label for="S.H.E">
<input type="radio" value="S.H.E" id="S.H.E" name="歌手"/>
S.H.E
</label>
<label for="李榮浩">
<input type="radio" value="李榮浩" id="李榮浩" name="歌手"/>
李榮浩
</label>
</fieldset>
</p>
<input type="submit" value="提交給黃子涵吧">
</form>
</body>
</html>
此例中使用了一個hidden型input元素。其name和value屬性的值分別設定為recordID和1234。 瀏覽器顯示這個頁面時不會顯示該元素，如下圖所示。
使用者提交表單時，瀏覽器會將那個hidden型input元素的name和value屬性值作為一個數據項納入傳送內容。上圖中的表單提交後來自Node.jsM本的反饋資訊如下圖所示。
警告
只有那些出於方便或易用性考慮而不是因為機密或涉及安全原因需要隱藏的資料才適合使用這種input元素。使用者只要檢視頁面的HTML原始碼就能看到隱藏的input元素，而且該元素的值是以明文形式從瀏覽器發到伺服器的。大多數Web應用程式框架都能將機密資料安全地存放在伺服器上，然後根據會話識別符號（一般使用cookie）將請求與它關聯起來。
用input元素生成影象按鈕和分割槽響應圖
image型input元素生成的按鈕顯示為一幅影象，點選它可以提交表單。這種型別的input元素支援的額外屬性如下表所示。
image型input元素可用的額外屬性
| 屬 性 | 說 明 | 是否為HTML5新增 |
|---|---|---|
| alt | 提供元素的說明文字。對需要藉助殘障輔助技術的使用者很有用 | 否 |
| formaction | 等價於button元素的同名屬性 | 是 |
| formenctype | 等價於button元素的同名屬性 | 是 |
| formmethod | 等價於button元素的同名屬性 | 是 |
| formtarget | 等價於button元素的同名屬性 | 是 |
| fonnnovalidate | 等價於button元素的同名屬性 | 是 |
| height | 以畫素為單位設定影象的高度（不設定這個屬性的話影象將以其本身的高度顯示） | 否 |
| src | 指定要顯示的影象的URL | 否 |
| width | 以畫素為單位設定影象的寬度（不設定這個屬性的話影象將以其本身的寬度顯示） | 否 |
程式碼清單16示範了image型input元素的用法。
程式碼清單16 使用image型input元素
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://192.168.1.102/form">
<input type="hidden" name="recordID" value="1234"/>
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：1
<input type="range" step="1" min="0" max="100" value="1" id="mark" name="mark"/>100
</label>
</p>
<P>
<label for="handsome">
黃子涵是不是帥哥：<input type="checkbox" id="handsome" name="handsome"/>
</label>
</P>
<p>
<label for="email">
黃子涵的電子郵箱：<input type="email" placeholder="[email protected]" id="email" name="email"/>
</label>
</p>
<p>
<label for="tel">
黃子涵的電話：<input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"/>
</label>
</p>
<p>
<label for="url">
黃子涵的個人網站：<input type="url" id="url" name="url"/>
</label>
</p>
<p>
<label for="lastsing">
黃子涵最近唱歌是什麼時候：<input type="date" id="lastsing" name="lastsing"/>
</label>
</p>
<P>
<label for="color">
黃子涵的顏色：<input type="color" id="color" name="color"/>
</label>
</P>
<p>
<label for="search">
把黃子涵找出來吧：<input type="search" id="search" name="search"/>
</label>
</p>
<p>
<fieldset>
<legend>選出黃子涵喜歡的歌手</legend>
<label for="周杰倫">
<input type="radio" checked value="周杰倫" id="周杰倫" name="歌手"/>
周杰倫
</label>
<label for="陳奕迅">
<input type="radio" value="陳奕迅" id="陳奕迅" name="歌手"/>
陳奕迅
</label>
<label for="王菲">
<input type="radio" value="王菲" id="王菲" name="歌手"/>
王菲
</label>
<label for="林宥嘉">
<input type="radio" value="林宥嘉" id="林宥嘉" name="歌手"/>
林宥嘉
</label>
<label for="王力巨集">
<input type="radio" value="王力巨集" id="王力巨集" name="歌手"/>
王力巨集
</label>
<label for="五月天">
<input type="radio" value="五月天" id="五月天" name="歌手"/>
五月天
</label>
<label for="陳小春">
<input type="radio" value="陳小春" id="陳小春" name="歌手"/>
陳小春
</label>
<label for="周柏豪">
<input type="radio" value="周柏豪" id="周柏豪" name="歌手"/>
周柏豪
</label>
<label for="許嵩">
<input type="radio" value="許嵩" id="許嵩" name="歌手"/>
許嵩
</label>
<label for="蔡依林">
<input type="radio" value="蔡依林" id="蔡依林" name="歌手"/>
蔡依林
</label>
<label for="S.H.E">
<input type="radio" value="S.H.E" id="S.H.E" name="歌手"/>
S.H.E
</label>
<label for="李榮浩">
<input type="radio" value="李榮浩" id="李榮浩" name="歌手"/>
李榮浩
</label>
</fieldset>
</p>
<input type="submit" value="提交給黃子涵吧">
<input type="image" src="accept.png" name="submit"/>
</form>
</body>
</html>
其顯示結果見下圖。
點選影象按鈕會導致瀏覽器提交表單。在傳送的資料中包括來自那個image型input元素的兩個資料項，它們分別代表使用者點選位置相對於影象左上角的x座標和少座標。提交上圖中的表單後Node.js指令碼的反饋資訊如下圖所示。從中可以看到瀏覽器傳送了一些什麼樣的資料值。
由於在這個過程中可以得到點選位置的座標資訊，所以可以讓影象中的不同區域代表不同的操作，然後根據使用者在影象上的點選位置作出相應的反應。
用input元素上傳檔案
最後一種input元素型別是file型,它可以在提交表單時將檔案上傳到伺服器。該型別的input元素支援的額外屬性如下表所示。
file型input元素可用的額外屬性
| 屬 性 | 說 明 | 是否為HTML5新增 |
|---|---|---|
| accept | 指定接受的MIME型別。關於MIME型別的定義，參見RFC 2046(http://tools.ietf.org/html/rfc2046) | 否 |
| multiple | 設定這個屬性的input元素可一次上傳多個檔案 | 是 |
| required | 表明使用者必須為其提供一個值，否則無法通過輸入驗證 | 是 |
程式碼清單17示範了file型input元素的用法。
程式碼清單17 用file型input元素上傳檔案
<!DOCTYPE HTML>
<html>
<head>
<title>黃子涵</title>
<meta name="作者" content="黃子涵"/>
<meta name="描述" content="黃子涵是帥哥！"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<form method="post" action="http://192.168.1.102/form" enctype="multipart/form-data">
<input type="hidden" name="recordID" value="1234"/>
<p>
<label for="name">
黃子涵的姓名：<input value="黃子涵" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="password">
黃子涵的密碼：<input type="password" placeholder="Min 6 characters" id="password" name="password"/>
</label>
</p>
<p>
<label for="song">
黃子涵的歌曲：<input value="千里之外" id="song" name="song"/>
</label>
</p>
<p>
<label for="mark">
給黃子涵打打分吧：1
<input type="range" step="1" min="0" max="100" value="1" id="mark" name="mark"/>100
</label>
</p>
<P>
<label for="handsome">
黃子涵是不是帥哥：<input type="checkbox" id="handsome" name="handsome"/>
</label>
</P>
<p>
<label for="email">
黃子涵的電子郵箱：<input type="email" placeholder="[email protected]" id="email" name="email"/>
</label>
</p>
<p>
<label for="tel">
黃子涵的電話：<input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"/>
</label>
</p>
<p>
<label for="url">
黃子涵的個人網站：<input type="url" id="url" name="url"/>
</label>
</p>
<p>
<label for="lastsing">
黃子涵最近唱歌是什麼時候：<input type="date" id="lastsing" name="lastsing"/>
</label>
</p>
<P>
<label for="color">
黃子涵的顏色：<input type="color" id="color" name="color"/>
</label>
</P>
<p>
<label for="search">
把黃子涵找出來吧：<input type="search" id="search" name="search"/>
</label>
</p>
<p>
<fieldset>
<legend>選出黃子涵喜歡的歌手</legend>
<label for="周杰倫">
<input type="radio" checked value="周杰倫" id="周杰倫" name="歌手"/>
周杰倫
</label>
<label for="陳奕迅">
<input type="radio" value="陳奕迅" id="陳奕迅" name="歌手"/>
陳奕迅
</label>
<label for="王菲">
<input type="radio" value="王菲" id="王菲" name="歌手"/>
王菲
</label>
<label for="林宥嘉">
<input type="radio" value="林宥嘉" id="林宥嘉" name="歌手"/>
林宥嘉
</label>
<label for="王力巨集">
<input type="radio" value="王力巨集" id="王力巨集" name="歌手"/>
王力巨集
</label>
<label for="五月天">
<input type="radio" value="五月天" id="五月天" name="歌手"/>
五月天
</label>
<label for="陳小春">
<input type="radio" value="陳小春" id="陳小春" name="歌手"/>
陳小春
</label>
<label for="周柏豪">
<input type="radio" value="周柏豪" id="周柏豪" name="歌手"/>
周柏豪
</label>
<label for="許嵩">
<input type="radio" value="許嵩" id="許嵩" name="歌手"/>
許嵩
</label>
<label for="蔡依林">
<input type="radio" value="蔡依林" id="蔡依林" name="歌手"/>
蔡依林
</label>
<label for="S.H.E">
<input type="radio" value="S.H.E" id="S.H.E" name="歌手"/>
S.H.E
</label>
<label for="李榮浩">
<input type="radio" value="李榮浩" id="李榮浩" name="歌手"/>
李榮浩
</label>
</fieldset>
</p>
<input type="submit" value="提交給黃子涵吧">
<input type="image" src="accept.png" name="submit"/>
</form>
</body>
</html>
表單編碼型別為
multipart/form-data的時候才能上傳檔案。上面的程式碼清單中已將form元素的enctype屬性設定為該值。這種input元素的顯示結果如下圖所示。
點選Choose File按鈕，就會開啟一個用來選擇檔案的對話方塊。提交表單時，所選檔案的內容會被髮送給伺服器。