細說HTML5中的表單元素

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

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

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

1 認識HTML表單

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

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

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

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

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

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

2 input元素及其屬性

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

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

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

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

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

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

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

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

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

（8）Date pickers類型。Date pickers類型是指時間日期類型，HTML5中提供了多個可供選取日期和時間的輸入類型，用于驗證輸入的日期。

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

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

2.2 input元素的其他屬性

（1）autofocus屬性。在HTML5中，autofocus屬性用于指定頁面加載后是否自動獲取焦點，將標記的屬性值指定為true時，表示頁面加載完畢后會自動獲取該焦點。注意：同一頁面中只能指定一個autofocus屬性值，請謹慎使用。

例如：

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

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

參考代碼：

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

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

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

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

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

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

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

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

請選擇文件：

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

例如：郵政編碼

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

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

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

請輸入郵箱：

3 綜合案例

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

圖4 滑動效果

圖3 初始效果

案例分析：

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

標記用來輸出滑塊值。

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

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

參考代碼如下：

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