◇四川職業(yè)技術(shù)學(xué)院 朱 倩

表單在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中有著不可替代的作用，在HTML5新增了表單了表單方面的諸多功能，為網(wǎng)頁(yè)開發(fā)者帶來(lái)了極大的方便，本文就新增的input輸入類型和其他屬性進(jìn)行探討。

表單在網(wǎng)頁(yè)設(shè)計(jì)中的作用非常重要，是網(wǎng)頁(yè)數(shù)據(jù)采集功能的重要實(shí)現(xiàn)。HTML5中增加了表單方面的諸多功能，包括input輸入類型、表單元素、form屬性等，使用這些新的元素，前端開發(fā)人員可以更加高效的制作Web表單。

1 認(rèn)識(shí)HTML表單

在HTML中，一個(gè)完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個(gè)部分構(gòu)成，如下圖所示，即為一個(gè)簡(jiǎn)單的HTML表單界面及其構(gòu)成。

圖1 HTML表單構(gòu)成圖

對(duì)于表單構(gòu)成中的表單控件、提示信息和表單域，對(duì)它們的具體解釋如下：

（1）表單控件：包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。

（2）提示信息：一個(gè)表單中通常還需要包含一些說(shuō)明性的文字，提示用戶進(jìn)行填寫和操作。

（3）表單域：它相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息，可以通過(guò)它定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。

2 input元素及其屬性

類型元素是表單中的最常見的元素，網(wǎng)頁(yè)中常見的單行文本框、單選按鈕、復(fù)選框、普通按鈕、提交按鈕等都是通過(guò)它定義的。在HTML5中，我們不僅可以使用這些常見的類型，還新增了一些類型。下面就input元素及其屬性做介紹，其基本語(yǔ)法格式如下：。

2.1 input元素type屬性新增的8種類型

（1）email類型。email類型的input元素是一種專門用于輸入E-mail地址的文本輸入框，用來(lái)驗(yàn)證email輸入框的內(nèi)容是否符合Email郵件地址格式；如果不符合，將提示相應(yīng)的錯(cuò)誤信息。

（2）url類型。url類型的input元素是一種用于輸入U(xiǎn)RL地址的文本框。如果所輸入的內(nèi)容是URL地址格式的文本，則會(huì)提交數(shù)據(jù)到服務(wù)器；如果輸入的值不符合URL地址格式，則不允許提交，并且會(huì)有提示信息。

（3）tel類型。tel類型用于提供輸入電話號(hào)碼的文本框，由于電話號(hào)碼的格式千差萬(wàn)別，很難實(shí)現(xiàn)一個(gè)通用的格式。因此，tel類型通常會(huì)和pattern屬性配合使用。

（4）search 類型。search 類型是一種專門用于輸入搜索關(guān)鍵詞的文本框，它能自動(dòng)記錄一些字符，例如站點(diǎn)搜索或者Google搜索。在用戶輸入內(nèi)容后，其右側(cè)會(huì)附帶一個(gè)刪除圖標(biāo)，單擊這個(gè)圖標(biāo)按鈕可以快速清除內(nèi)容。

（5）color類型。color類型用于提供設(shè)置顏色的文本框，實(shí)現(xiàn)一個(gè)RGB顏色輸入。其基本形式是#RRGGBB，默認(rèn)值為#000000，通過(guò)value屬性值可以更改默認(rèn)顏色。單擊color類型文本框，可以快速打開拾色器面板，方便用戶可視化選取一種顏色。

（6）number類型。number類型的input元素用于提供輸入數(shù)值的文本框。在提交表單時(shí)，會(huì)自動(dòng)檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi)，則會(huì)出現(xiàn)錯(cuò)誤提示。number類型的輸入框可以對(duì)輸入的數(shù)字進(jìn)行限制，規(guī)定允許的最大值和最小值、合法的數(shù)字間隔或默認(rèn)值等。

（7）range類型。range類型的input元素用于提供一定范圍內(nèi)數(shù)值的輸入范圍，在網(wǎng)頁(yè)中顯示為滑動(dòng)條。它的常用屬性與number類型一樣，通過(guò)min屬性和max屬性，可以設(shè)置最小值與最大值，通過(guò)step屬性指定每次滑動(dòng)的步幅。

（8）Date pickers類型。Date pickers類型是指時(shí)間日期類型，HTML5中提供了多個(gè)可供選取日期和時(shí)間的輸入類型，用于驗(yàn)證輸入的日期。

案例1：靈活使用HTML5表單新增的8種類型，制作情況調(diào)查表。

圖2 情況調(diào)查表效果圖

2.2 input元素的其他屬性

（1）autofocus屬性。在HTML5中，autofocus屬性用于指定頁(yè)面加載后是否自動(dòng)獲取焦點(diǎn)，將標(biāo)記的屬性值指定為true時(shí)，表示頁(yè)面加載完畢后會(huì)自動(dòng)獲取該焦點(diǎn)。注意：同一頁(yè)面中只能指定一個(gè)autofocus屬性值，請(qǐng)謹(jǐn)慎使用。

例如：

（2）form屬性。在HTML5之前，如果用戶要提交一個(gè)表單，必須把相關(guān)的控件元素都放在表單內(nèi)部，即標(biāo)簽之間。在提交表單時(shí)，會(huì)將頁(yè)面中不是表單子元素的控件直接忽略掉。有時(shí)可能需要提交表單之外的某些元素，則可用到form屬性。

例如：form屬性的應(yīng)用。

參考代碼：

（3）list屬性。在HTML5中新增了一個(gè)datalist元素，可以數(shù)據(jù)列表的下拉效果，用戶可以選擇也可以自己輸入，而list屬性用于指定輸入框所綁定的datalist元素，其值是某個(gè)datalist的id。

例如：list屬性的應(yīng)用

（4）min、max和step屬性。HTML5中的min、max和step屬性用于為包含數(shù)字或日期的input輸入類型規(guī)定限值，也就是給這些類型的輸入框加一個(gè)數(shù)值的約束，適用于date、pickers、number和range標(biāo)簽。具體屬性說(shuō)明如下：

max：規(guī)定輸入框所允許的最大輸入值。

min：規(guī)定輸入框所允許的最小輸入值。

Step：為輸入框規(guī)定合法的數(shù)字間隔，如果不設(shè)置，默認(rèn)值是1。

（5）multiple屬性。multiple屬性指定輸入框可以選擇多個(gè)值，該屬性適用于email和file類型的input元素。multiple屬性用于email類型的input元素時(shí)，表示可以向文本框中輸入多個(gè)Email地址，多個(gè)地址之間通過(guò)逗號(hào)隔開；multiple屬性用于file類型的input元素時(shí)，表示可以選擇多個(gè)文件。

例如：multiple屬性的應(yīng)用

請(qǐng)選擇文件：

（6）pattern屬性。pattern屬性用于驗(yàn)證input類型輸入框中，用戶輸入的內(nèi)容是否與所定義的正則表達(dá)式相匹配。pattern屬性適用于的類型是：text、search、url、tel、email和password的標(biāo)記。

例如：郵政編碼

（7）placeholder屬性。placeholder屬性用于為input類型的輸入框提供相關(guān)提示信息，以描述輸入框期待用戶輸入何種內(nèi)容。在輸入框?yàn)榭諘r(shí)顯式出現(xiàn)，而當(dāng)輸入框獲得焦點(diǎn)時(shí)則會(huì)消失。placeholder屬性適用于type屬性值為text、search、url、tel、email以及password的標(biāo)記。

（8）required屬性。HTML5中的輸入類型，不會(huì)自動(dòng)判斷用戶是否在輸入框中輸入了內(nèi)容，如果開發(fā)者要求輸入框中的內(nèi)容是必須填寫的，那么需要為input元素指定required屬性。required屬性用于規(guī)定輸入框填寫的內(nèi)容不能為空，否則不允許用 戶提交表單。用于text、search、url、email、password、number、checkbox、radio和file。

例如：placeholder屬性、required屬性的應(yīng)用

請(qǐng)輸入郵箱：

3 綜合案例

使用HTML5新增range類型拖動(dòng)改變顏色值。效果圖如下：

圖4 滑動(dòng)效果

圖3 初始效果

案例分析：

（1）采用fieldset實(shí)現(xiàn)界面布局，采用legend實(shí)現(xiàn)分組框標(biāo)題，在分組框中設(shè)置了兩個(gè)span，一個(gè)包含三個(gè)滑塊，一個(gè)span用于顏色的顯示，還有一個(gè)

標(biāo)記用來(lái)輸出滑塊值。

（2）在CSS樣式表中完成界面的布局（位于頁(yè)面的中央）。

（3）在javascript中完成拖動(dòng)事件的實(shí)現(xiàn)（onChange）。

參考代碼如下：

通過(guò)上面的介紹，完成了對(duì)HTML5表單中input元素的各種新增類型以及常見屬性的學(xué)習(xí)，對(duì)初學(xué)者有一定的參考借鑒作用。HTML5表單還有很多其他的元素以及屬性，在我們進(jìn)行表單應(yīng)用的過(guò)程中都有著不可缺少的作用，有待進(jìn)一步學(xué)習(xí)。