除了type屬性之外，<input/>標記還可以定義很多其他的屬性，以實現(xiàn)不同的功能。
1.autofocus屬性
在HTML5中，autofocus屬性用于指定頁面加載后是否自動獲取焦點，將標記的屬性值指定為true時，表示頁面加載完畢后會自動獲取該焦點。
下面通過案例2-39來演示autofocus屬性的使用，如圖2-40所示。
例2-39 example39.html
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>autofocus屬性的使用</title>
</head>
<body>
<form action="#" method="get">
請輸入搜索關(guān)鍵詞：
<input type="text" name="user_name" autocomplete="off" autofocus="true"/><br/>
<input type="submit" value="提交" />
</form>
</body>
</html> |
圖2-40 autofocus屬性的使用
圖2-41 form屬性的使用
從圖2-40可以看出，<input />元素輸入框在頁面加載后自動獲取焦點，并且關(guān)閉了自動完成功能。
2.form屬性
在HTML5之前，如果用戶要提交一個表單，必須把相關(guān)的控件元素都放在表單內(nèi)部，即<form>和</form>標簽之間。在提交表單時，會將頁面中不是表單子元素的控件直接忽略掉。
下面通過一個案例2-40來演示form屬性的使用，如圖2-41所示。
例2-40 example40.html
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form屬性的使用</title> </head> <body> <form action="#" method="get" id="user_form"> 請輸入您的姓名：<input type="text" name="first_name"/> <input type="submit" value="提交" /> </form> <p>下面的輸入框在form元素外，但因為指定了form屬性為表單的id， 所以該輸入框仍然屬于表單的一部分。</p> 請輸入您的昵稱： <input type="text" name="last_name" form="user_form"/><br/> </body> </html> |
在例2-40中，分別添加兩個<input/>元素，并且第二個<input />元素不在<form> </form>標記中。另外，指定第二個<input/>元素的form屬性值為該表單的id。
此時，如果在輸入框中分別輸入姓名和昵稱，則first_name和last_name將分別被賦值為輸入的值。例如，在姓名處輸入“李明”，昵稱處輸入“小明”， 效果如圖2-42所示。
圖2-42 form屬性的使用
3. list屬性
通過datalist元素實現(xiàn)數(shù)據(jù)列表的下拉效果。而list屬性用于指定輸入框所綁定的datalist元素，其值是某個datalist元素的id。
下面通過案例2-41來進一步學習list屬性的使用，如圖2-43所示。
例2-41example141.html
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>list屬性的使用</title>
</head>
<body>
<form action="#" method="get">
請輸入網(wǎng)址：<input type="url" list="url_list" name="weburl"/>
<datalist id="url_list">
<option label="新浪" value="http://www.sina.com.cn"></option>
<option label="搜狐" value="http://www.sohu.com"></option>
<option label="網(wǎng)易" value="http://www.126.net/"></option>
</datalist>
<input type="submit" value="提交"/>
</form>
</body>
</html> |
圖2-43 list屬性的使用
4. multiple屬性
multiple屬性指定輸入框可以選擇多個值，該屬性適用于email和file類型的input元素。multiple屬性用于email類型的input元素時，表示可以向文本框中輸入多個E-mail地址，多個地址之間通過逗號隔開；multiple屬性用于file類型的input元素時，表示可以選擇多個文件。下面通過案例2-42來進一步演示multiple屬性的使用，如圖2-44所示。
例2-42example42.html
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>multiple屬性的使用</title>
</head>
<body>
<form action="#" method="get">
電子郵箱：<input type="email" name="myemail" multiple="true"/> （如果電子郵箱有多個，請使用逗號分隔）<br/><br/>
上傳照片：<input type="file" name="selfile" multiple="true"/> <br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html> |
圖2-44 multiple屬性的使用
5. min、max和step屬性
HTML5中的min、max和step屬性用于為包含數(shù)字或日期的input輸入類型規(guī)定限值，也就是給這些類型的輸入框加一個數(shù)值的約束，適用于date、pickers、number和range標簽。具體屬性說明如下：
max：規(guī)定輸入框所允許的最大輸入值。
min：規(guī)定輸入框所允許的最小輸入值。
step：為輸入框規(guī)定合法的數(shù)字間隔，如果不設(shè)置，默認值是1。
6．pattern屬性
pattern屬性用于驗證input類型輸入框中，用戶輸入的內(nèi)容是否與所定義的正則表達式相匹配。pattern屬性適用于的類型是：text、search、url、tel、email和password的<input/>標記。常用的正則表達式如下表2-6所示。
表2-6 常用的正則表達式
| 正則表達式 | 說明 |
| ^[0-9]*$ | 數(shù)字 |
| ^\d{n}$ | n位的數(shù)字 |
| ^\d{n,}$ | 至少n位的數(shù)字 |
| ^\d{m,n}$ | m-n位的數(shù)字 |
| ^(0|[1-9][0-9]*)$ | 零和非零開頭的數(shù)字 |
| ^([1-9][0-9]*)+(.[0-9]{1,2})?$ | 非零開頭的最多帶兩位小數(shù)的數(shù)字 |
| ^(\-|\+)?\d+(\.\d+)?$ | 正數(shù)、負數(shù)、和小數(shù) |
| ^\d+$ 或 ^[1-9]\d*|0$ | 非負整數(shù) |
| ^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$ | 非正整數(shù) |
| ^[\u4e00-\u9fa5]{0,}$ | 漢字 |
| ^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$ | 英文和數(shù)字 |
| ^[A-Za-z]+$ | 由26個英文字母組成的字符串 |
| ^[A-Za-z0-9]+$ | 由數(shù)字和26個英文字母組成的字符串 |
| ^\w+$ 或 ^\w{3,20}$ | 由數(shù)字、26個英文字母或者下劃線組成的字符串 |
| ^[\u4E00-\u9FA5A-Za-z0-9_]+$ | 中文、英文、數(shù)字包括下劃線 |
| ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ | Email地址 |
| [a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ | URL地址 |
| ^\d{15}|\d{18}$ | 身份證號(15位、18位數(shù)字) |
| ^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$ | 以數(shù)字、字母x結(jié)尾的短身份證號碼 |
| ^[a-zA-Z][a-zA-Z0-9_]{4,15}$ | 帳號是否合法(字母開頭，允許5-16字節(jié)， 允許字母數(shù)字下劃線) |
| ^[a-zA-Z]\w{5,17}$ | 密碼(以字母開頭，長度在6~18之間， 只能包含字母、數(shù)字和下劃線) |
了解了pattern屬性以及常用的正則表達式，下面通過案例2-43來進行演示，如圖2-45所示。
例2-43 example43.html
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pattern屬性</title>
</head>
<body>
<form action="#" method="get">
賬 號： <input type="text" name="username" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" /> （ 以字母開頭，允許5-16字節(jié)，允許字母數(shù)字下劃線）<br/>
密 碼： <input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" /> （以字母開頭，長度在6~18之間，只能包含字母、數(shù)字和下劃線）<br/>
Email地址： <input type="email" name="myemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
<input type="submit" value="提交"/>
</form>
</body>
</html> |
圖2-45 pattern屬性的使用
7．placeholder屬性
placeholder屬性用于為input類型的輸入框提供相關(guān)提示信息，以描述輸入框期待用戶輸入何種內(nèi)容。在輸入框為空時顯式出現(xiàn)，而當輸入框獲得焦點時則會消失。示例代碼如下：
請輸入郵政編碼：<input type="text" name="code" pattern="[0-9]{6}" placeholder="請輸入6位數(shù)的郵政編碼" /> |
8. required屬性
HTML5中的輸入類型，不會自動判斷用戶是否在輸入框中輸入了內(nèi)容，如果開發(fā)者要求輸入框中的內(nèi)容是必須填寫的，那么需要為input元素指定required屬性。required屬性用于規(guī)定輸入框填寫的內(nèi)容不能為空，否則不允許用戶提交表單。示例代碼如下：
| <input type="text" name="user_name" required="required"/> |
2.7.5其他表單元素
1.textarea元素
當定義input控件的type屬性值為text時，可以創(chuàng)建一個單行文本輸入框。但是，如果需要輸入大量的信息，單行文本輸入框就不再適用，為此HTML語言提供了<textarea></textarea>標記。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：
| <textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)"> 文本內(nèi)容 </textarea> |
<textarea>元素除了cols和rows屬性外，還擁有幾個可選屬性，分別為disabled、name和readonly，詳見下表2-7所示。
表2-7<textarea>元素屬性
| 屬性 | 屬性值 | 描述 |
| name | 由用戶自定義 | 控件的名稱 |
| readonly | readonly | 該控件內(nèi)容為只讀（不能編輯修改） |
| disabled | disabled | 第一次加載頁面時禁用該控件（顯示為灰色） |
下面通過案例2-44來演示<textarea>元素的使用，如圖2-46所示。
例2-44 example2-44.html
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textarea控件</title>
</head>
<body>
<form action="#" method="post">
評論：<br />
<textarea cols="60" rows="8">
評論的時候，請遵紀守法并注意語言文明，多給文檔分享人一些支持。
</textarea><br />
<input type="submit" value="提交"/>
</form>
</body>
</html> |
圖2-46 textarea控件使用
圖2-47 select控件效果
1．select控件
瀏覽網(wǎng)頁時，經(jīng)常會看到包含多個選項的下拉菜單，例如選擇所在的城市、出生年月、興趣愛好等。如圖2-47左所示即為一個下拉菜單，當點擊下拉三角時，會出現(xiàn)一個選擇列表，如圖2-47右所示。
使用select控件定義下拉菜單的基本語法格式如下：
| <select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select> |
在上面的語法中，<select></select>標記用于在表單中添加一個下拉菜單，<option></option>標記嵌套在<select></select>標記中，用于定義下拉菜單中的具體選項，每對<select></select>中至少應(yīng)包含一對<option></option>。在HTML中，可以為<select>和<option>標記定義屬性，以改變下拉菜單的外觀顯示效果，具體如下表2-8所示。
表2-8 下拉菜單屬性
| 標記名 | 常用屬性 | 描述 |
| <select> | size | 指定下拉菜單的可見選項數(shù)（取值為正整數(shù)）。 |
| multiple | 定義multiple="multiple"時，下拉菜單將具有多項選擇的功能，方法為按住Ctrl鍵的同時選擇多項。 |
| <option> | selected | 定義selected =" selected "時，當前項即為默認選中項。 |
下面通過案例2-45來演示幾種不同的下拉菜單效果，如圖2-48所示。
例2-45 example45.html
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>select控件</title> </head> <body> <form action="#" method="post"> 所在校區(qū)： <select> <!--最基本的下拉菜單--> <option>-請選擇-</option> <option>北京</option> <option>上海</option> <option>廣州</option> <option>武漢</option> <option>成都</option> </select> 特長（單選）: <select> <option>唱歌</option> <option selected="selected">畫畫</option> <!--設(shè)置默認選中項--> <option>跳舞</option> </select> 愛好（多選）: <select multiple="multiple" size="4"> <!--設(shè)置多選和可見選項數(shù)--> <option>讀書</option> <option selected="selected">寫代碼</option> <!--設(shè)置默認選中項--> <option>旅行</option> <option selected="selected">聽音樂</option> <!--設(shè)置默認選中項--> <option>踢球</option> </select><br /><br /> <input type="submit" value="提交"/> </form> </body> </html> |
圖2-48 select控件效果
3.datalist元素
datalist元素用于定義輸入框的選項列表，列表通過datalist內(nèi)的option元素進行創(chuàng)建。如果用戶不希望從列表中選擇某項，也可以自行輸入其他內(nèi)容。datalist元素通常與input元素配合使用，來定義input的取值。在使用<datalist>標記時，需要通過id屬性為其指定一個唯一的標識，然后為input元素指定list屬性，將該屬性值設(shè)置為option元素對應(yīng)的id屬性值即可。下面通過案例2-46來演示datalist元素的使用，如圖2-49所示。
例2-46 example46.html
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>datalist元素</title> </head> <body> <form action="#" method="post"> 請輸入用戶名：<input type="text" list="namelist"/> <datalist id="namelist"> <option>admin</option> <option>lucy</option> <option>lily</option> </datalist> <input type="submit" value="提交" /> </form> </body> </html> |
圖2-49 datalist元素
4.keygen元素
keygen元素用于表單的密鑰生成器，能夠使用戶驗證更為安全、可靠。當提交表單時會生成兩個鍵：一個是私鑰，它存儲在客戶端；一個是公鑰，它被發(fā)送到服務(wù)器，驗證用戶的客戶端證書。如果新的瀏覽器能夠?qū)eygen元素的支持度再增強一些，則有望使其成為一種有用的安全標準。keygen元素擁有多個屬性，常用屬性及說明如下表2-9所示。
表2-9keygen元素屬性
| 屬性 | 說明 |
| autofocus | 使keygen字段在頁面加載時獲得焦點。 |
| challenge | 如果使用，則將keygen的值設(shè)置為在提交時詢問。 |
| disabled | 禁用 keytag 字段。 |
| form | 定義該 keygen 字段所屬的一個或多個表單。 |
| keytype | 定義 keytype。rsa 生成 RSA 密鑰。 |
| name | 定義 keygen 元素的唯一名稱。name 屬性用于在提交表單時搜集字段的值。 |
keygen元素示例代碼如下：
| 請選擇加密強度：<keygen name="security"/> |
5．output元素
output元素用于不同類型的輸出，可以在瀏覽器中顯示計算結(jié)果或腳本輸出。其常用屬性有3個，具體如下表2-10所示。
表2-10 output元素屬性
| 屬性 | 說明 |
| for | 定義輸出域相關(guān)的一個或多個元素。 |
| form | 定義輸入字段所屬的一個或多個表單。 |
| name | 定義對象的唯一名稱。 |
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
執(zhí)行計算然后在 <output> 元素中顯示結(jié)果：
