3.3　新的input屬性

HTML5為input元素新增了多個(gè)屬性，用于限制輸入行為或格式。

3.3.1　autocomplete——自動(dòng)完成

視頻講解

autocomplete屬性可以幫助用戶在輸入框中實(shí)現(xiàn)自動(dòng)完成輸入。取值包括on和off，用法如下所示。

    <input type="email" name="email" autocomplete="off" />

autocomplete屬性也適用于form元素，默認(rèn)狀態(tài)下表單的autocomplete屬性處于打開(kāi)狀態(tài)，其包含的輸入域會(huì)自動(dòng)繼承autocomplete狀態(tài)，也可以為某個(gè)輸入域單獨(dú)設(shè)置autocomplete狀態(tài)。

【示例】設(shè)置autocomplete為on時(shí)，可以使用HTML5新增的datalist元素和list屬性提供一個(gè)數(shù)據(jù)列表供用戶進(jìn)行選擇。下面示例演示如何應(yīng)用autocomplete屬性、datalist元素和list屬性實(shí)現(xiàn)自動(dòng)完成。

在瀏覽器中預(yù)覽，當(dāng)用戶將焦點(diǎn)定位到文本框中時(shí)，會(huì)自動(dòng)出現(xiàn)一個(gè)城市列表供用戶選擇，如圖3.36所示。而當(dāng)用戶單擊頁(yè)面的其他位置時(shí)，這個(gè)列表就會(huì)消失。

當(dāng)用戶輸入時(shí)，該列表會(huì)隨用戶的輸入自動(dòng)更新，例如，當(dāng)輸入字母q時(shí)，會(huì)自動(dòng)更新列表，只列出以q開(kāi)頭的城市名稱，如圖3.37所示。隨著用戶不斷地輸入新的字母，下面的列表還會(huì)隨之變化。

圖3.36　自動(dòng)完成數(shù)據(jù)列表

圖3.37　數(shù)據(jù)列表隨用戶輸入而更新

3.3.2　autofocus——自動(dòng)獲取焦點(diǎn)

視頻講解

autofocus屬性可以實(shí)現(xiàn)在頁(yè)面加載時(shí)，讓表單控件自動(dòng)獲得焦點(diǎn)。用法如下所示。

    <input type="text" name="fname" autofocus="autofocus" />

autocomplete屬性適用所有<input>標(biāo)簽的類型，如文本框、復(fù)選框、單選按鈕、普通按鈕等。

【示例1】下面示例演示如何應(yīng)用autofocus屬性。

以上代碼在Chrome瀏覽器中的運(yùn)行結(jié)果如圖3.38所示。頁(yè)面載入后，“同意”按鈕自動(dòng)獲得焦點(diǎn)，因?yàn)橥ǔＯＭ脩糁苯訂螕粼摪粹o。如果將“拒絕”按鈕的autofocus屬性值設(shè)置為on，則頁(yè)面載入后焦點(diǎn)就會(huì)在“拒絕”按鈕上，如圖3.39所示，但從頁(yè)面功用的角度來(lái)說(shuō)這樣并不合適。

圖3.38　“同意”按鈕自動(dòng)獲得焦點(diǎn)

圖3.39　“拒絕”按鈕自動(dòng)獲得焦點(diǎn)

【示例2】如果瀏覽器不支持autofocus屬性，可以使用JavaScript實(shí)現(xiàn)相同的功能。在下面腳本中，先檢測(cè)瀏覽器是否支持autofocus屬性，如果不支持則獲取指定的表單域，為其調(diào)用focus()方法，強(qiáng)迫其獲取焦點(diǎn)。

3.3.3　form——?dú)w屬表單

視頻講解

form屬性可以設(shè)置表單控件歸屬的表單。適用于所有<input>標(biāo)簽的類型。

【示例】form屬性必須引用所屬表單的id，如果一個(gè)form屬性要引用兩個(gè)或兩個(gè)以上的表單，則需要使用空格將表單的id值分隔開(kāi)。下面是一個(gè)form屬性應(yīng)用。

    <form action="" method="get" id="form1">
    請(qǐng)輸入姓名：<input type="text" name="name1" autofocus/>
    <input type="submit"  value="提交"/>
    </form>
    請(qǐng)輸入住址：<input type="text" name="address1" form="form1" />

以上代碼在Chrome瀏覽器中的運(yùn)行結(jié)果如圖3.40所示。如果填寫姓名和住址并單擊“提交”按鈕，則name1和address1分別會(huì)被賦值為所填寫的值。例如，如果在姓名處填寫“zhangsan”，住址處填寫“北京”，則單擊“提交”按鈕后，服務(wù)器端會(huì)接收到“name1=zhangsan”和“address1=北京”。用戶也可以在提交后觀察瀏覽器的地址欄，可以看到有“name1=zhangsan&address1=北京”字樣，如圖3.41所示。

圖3.40　form屬性的應(yīng)用

圖3.41　地址中要提交的數(shù)據(jù)

3.3.4　表單重寫

視頻講解

HTML5新增5個(gè)表單重寫屬性，用于重寫<form>標(biāo)簽屬性設(shè)置，簡(jiǎn)單說(shuō)明如下：

　formaction：重寫<form>標(biāo)簽的action屬性。

　formenctype：重寫<form>標(biāo)簽的enctype屬性。

　formmethod：重寫<form>標(biāo)簽的method屬性。

　formnovalidate：重寫<form>標(biāo)簽的novalidate屬性。

　formtarget：重寫<form>標(biāo)簽的target屬性。

【示例】下面示例設(shè)計(jì)通過(guò)formaction屬性，實(shí)現(xiàn)將表單提交到不同的服務(wù)器頁(yè)面。

3.3.5　height和width——高和寬

視頻講解

height和width屬性僅用于設(shè)置<input type="image">標(biāo)簽的圖像高度和寬度。

【示例】下面示例演示了height與width屬性的應(yīng)用。

    <form action="testform.asp" method="get">
    請(qǐng)輸入用戶名: <input type="text" name="user_name" /><br />
    <input type="image" src="images/submit.png" width="72" height="26" />
    </form>

源圖像的大小為288×104像素，使用以上代碼將其大小限制為72×26像素，在Chrome瀏覽器中的運(yùn)行結(jié)果如圖3.42所示。

圖3.42　form屬性的應(yīng)用

3.3.6　list——列表選項(xiàng)

視頻講解

list屬性用于設(shè)置輸入域的datalist。datalist是輸入域的選項(xiàng)列表。該屬性適用于以下類型的<input>標(biāo)簽：text、search、url、telephone、email、date pickers、number、range和color。

演示示例可參考3.4.1節(jié)datalist元素介紹。

3.3.7　min、max和step——最小值、最大值和步長(zhǎng)

視頻講解

min、max和step屬性用于為包含數(shù)字或日期的input輸入類型設(shè)置限值，適用于date pickers、number和range類型的<input>標(biāo)簽。具體說(shuō)明如下：

　min屬性：設(shè)置輸入框所允許的最小值。

　max屬性：設(shè)置輸入框所允許的最大值。

　step屬性：為輸入框設(shè)置合法的數(shù)字間隔（步長(zhǎng)）。例如，step="4"，則合法值包括-4、0、4等。

【示例】下面示例設(shè)計(jì)一個(gè)數(shù)字輸入框，并規(guī)定該輸入框接受介于0到12的值，且數(shù)字間隔為4。

在Chrome瀏覽器中運(yùn)行，如果單擊數(shù)字輸入框右側(cè)的微調(diào)按鈕，則可以看到數(shù)字以4為步進(jìn)值遞增，如圖3.43所示；如果輸入不合法的數(shù)值，如5，單擊“提交”按鈕時(shí)會(huì)顯示錯(cuò)誤提示，如圖3.44所示。

圖3.43　list屬性應(yīng)用

圖3.44　顯示錯(cuò)誤提示

3.3.8　multiple——多選

視頻講解

multiple屬性可以設(shè)置輸入域一次選擇多個(gè)值。適用于email和file類型的<input>標(biāo)簽。

【示例】下面在頁(yè)面中插入一個(gè)文件域，使用multiple屬性允許用戶一次提交多個(gè)文件。

在Chrome瀏覽器中的運(yùn)行結(jié)果如圖3.45所示。如果單擊“選擇文件”按鈕，則會(huì)允許在打開(kāi)的對(duì)話框中選擇多個(gè)文件。選擇文件并單擊“打開(kāi)”按鈕后會(huì)關(guān)閉對(duì)話框，同時(shí)在頁(yè)面中會(huì)顯示選中文件的個(gè)數(shù)，如圖3.46所示。

圖3.45　multiple屬性的應(yīng)用

圖3.46　顯示被選中文件的個(gè)數(shù)

3.3.9　pattern——匹配模式

視頻講解

pattern屬性規(guī)定用于驗(yàn)證input域的模式（pattern）。模式就是JavaScript正則表達(dá)式，通過(guò)自定義的正則表達(dá)式匹配用戶輸入的內(nèi)容，以便進(jìn)行驗(yàn)證。該屬性適用于text、search、url、telephone、email和password類型的<input>標(biāo)簽。

【示例】下面示例使用pattern屬性設(shè)置文本框必須輸入6位數(shù)的郵政編碼。

在Chrome瀏覽器中的運(yùn)行結(jié)果如圖3.47所示。如果輸入的數(shù)字不是6位，則會(huì)出現(xiàn)錯(cuò)誤提示，如圖3.48所示。如果輸入的并非規(guī)定的數(shù)字，而是字母，也會(huì)出現(xiàn)這樣的錯(cuò)誤提示，因?yàn)閜attern="[0-9]{6}"中規(guī)定了必須輸入0～9這樣的阿拉伯?dāng)?shù)字，并且必須為6位數(shù)。

圖3.47　pattern屬性的應(yīng)用

圖3.48　出現(xiàn)錯(cuò)誤提示

3.3.10　placeholder——替換文本

視頻講解

placeholder屬性用于為input類型的輸入框提供一種文本提示，這些提示可以描述輸入框期待用戶輸入的內(nèi)容，在輸入框?yàn)榭諘r(shí)顯示，而當(dāng)輸入框獲取焦點(diǎn)時(shí)自動(dòng)消失。placeholder屬性適用于text、search、url、telephone、email和password類型的<input>標(biāo)簽。

【示例】下面是placeholder屬性的一個(gè)應(yīng)用示例。請(qǐng)注意比較本例與上例提示方法的不同。

以上代碼在Chrome瀏覽器中的運(yùn)行結(jié)果如圖3.49所示。當(dāng)輸入框獲得焦點(diǎn)并輸入字符時(shí)，提示文字消失，如圖3.50所示。

圖3.49　placeholder屬性的應(yīng)用

圖3.50　提示消失

3.3.11　required——必填

視頻講解

required屬性用于定義輸入框填寫的內(nèi)容不能為空，否則不允許提交表單。該屬性適用于text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file類型的<input>標(biāo)簽。

【示例】下面示例使用required屬性規(guī)定文本框必須輸入內(nèi)容。

在Chrome瀏覽器中的運(yùn)行結(jié)果如圖3.51所示。當(dāng)輸入框內(nèi)容為空并單擊“提交”按鈕時(shí)，會(huì)出現(xiàn)“請(qǐng)?zhí)顚懘俗侄巍钡奶崾荆挥休斎雰?nèi)容之后才允許提交表單。

圖3.51　提示“請(qǐng)?zhí)顚懘俗侄巍?/p>