Input元素的其他屬性
除了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">
請輸入搜索關鍵詞：
<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 />元素輸入框在頁面加載后自動獲取焦點，并且關閉了自動完成功能。
2.form屬性
在HTML5之前，如果用戶要提交一個表單，必須把相關的控件元素都放在表單內部，即<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">
請輸入網址：<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="網易" 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ù)字間隔，如果不設置，默認值是1。
6．pattern屬性
pattern屬性用于驗證input類型輸入框中，用戶輸入的內容是否與所定義的正則表達式相匹配。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結尾的短身份證號碼 |
| ^[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類型的輸入框提供相關提示信息，以描述輸入框期待用戶輸入何種內容。在輸入框為空時顯式出現(xiàn)，而當輸入框獲得焦點時則會消失。示例代碼如下：
請輸入郵政編碼：<input type="text" name="code" pattern="[0-9]{6}" placeholder="請輸入6位數(shù)的郵政編碼" /> |
8. required屬性
HTML5中的輸入類型，不會自動判斷用戶是否在輸入框中輸入了內容，如果開發(fā)者要求輸入框中的內容是必須填寫的，那么需要為input元素指定required屬性。required屬性用于規(guī)定輸入框填寫的內容不能為空，否則不允許用戶提交表單。示例代碼如下：
| <input type="text" name="user_name" required="required"/>
|