榮艷冬

摘要：到目前為止，網(wǎng)頁(yè)制作遵從的規(guī)范大部分是HTML4，這個(gè)規(guī)范的表單過于簡(jiǎn)陋，文中首先分析了HTML4中表單存在代碼量大、開發(fā)困難等問題，然后詳細(xì)闡述了HTML5表單技術(shù)對(duì)于表單類型和屬性的擴(kuò)充，最后深入分析了HTML5表單技術(shù)在當(dāng)前網(wǎng)頁(yè)制作和前端開發(fā)領(lǐng)域中的優(yōu)勢(shì)。

關(guān)鍵詞：HTML5；表單；驗(yàn)證

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）15-0215-02

表單是網(wǎng)頁(yè)中收集用戶數(shù)據(jù)的主要手段，隨著互聯(lián)技術(shù)高速發(fā)展，尤其是基于B/S架構(gòu)的軟件對(duì)于表單的需求非常高，這個(gè)領(lǐng)域被稱為前端開發(fā)，也就是網(wǎng)頁(yè)GUI（圖形用戶界面），GUI設(shè)計(jì)要遵循易用、高效、美觀、靈活、一致等原則。

HTML5是Web技術(shù)的一項(xiàng)巨大飛躍，它吸收了網(wǎng)頁(yè)的各種技術(shù)需求，將很多API列入規(guī)范之中，將圖形圖像、視頻音頻等媒體進(jìn)行標(biāo)準(zhǔn)化。其中，表單技術(shù)有了明顯的提升，無論是表單的類型，還是表單的屬性都使得表單的功能更加豐富，操作更加簡(jiǎn)潔，減少了代碼編寫，提高工作效率。

1 HTML4的表單技術(shù)

HTML4中的表單技術(shù)相當(dāng)簡(jiǎn)單，可以進(jìn)行數(shù)據(jù)收集的表單域的數(shù)量不超過十個(gè)，這是使得利用網(wǎng)頁(yè)制作數(shù)據(jù)錄入界面非常困難，具體存在的問題有以下幾個(gè)方面：

1）表單種類和屬性單一，無法滿足用戶需求；

2）表單自身沒有驗(yàn)證功能，需要用戶通過編寫腳本語(yǔ)言實(shí)現(xiàn)驗(yàn)證，增加了表單驗(yàn)證的難度，降低了頁(yè)面的執(zhí)行效率；

3）表單實(shí)現(xiàn)效果很差，雖然可以通過CSS進(jìn)行樣式修改，但這還不足以滿足用戶需求，例如：下拉菜單在IE瀏覽器中無法通過CSS進(jìn)行樣式的修改，很多用戶為了追求效果，需要自己開發(fā)下拉菜單。

基于以上的原因，用戶制作基于網(wǎng)頁(yè)GUI時(shí)，通常要使用Javascript語(yǔ)言和CSS技術(shù)整合控件滿足用戶需求，這大大增加了開發(fā)的難度，提高了開發(fā)成本，降低了開發(fā)效率。

2 HTML5表單技術(shù)

HTML5除了擴(kuò)充了表單類型，還給表單增加了很多新的屬性，使表單功能和數(shù)據(jù)驗(yàn)證的實(shí)現(xiàn)盡量從程序代碼分離出來。

2.1 HTML5新增表單

HTML5在HTML4的基礎(chǔ)之上擴(kuò)充了表單的類型，這些表單更加符合當(dāng)前網(wǎng)頁(yè)界面制作的需要，它不僅保持了簡(jiǎn)潔易用的特性，還內(nèi)置了驗(yàn)證功能，HTML5增加的表單如表1所示。其中“email”、“url”、“search”、“tel”表單在“text”表單基礎(chǔ)上內(nèi)置了驗(yàn)證功能，如果錄入數(shù)據(jù)錯(cuò)誤，會(huì)提示錯(cuò)誤，并且無法完成數(shù)據(jù)提交；“date”、“number”、“range”和“color”表單封裝了特有的功能，用戶可以更加方便的進(jìn)行日期選擇、顏色選擇等操作。

2.2 HTML5表單屬性

HTML5除了擴(kuò)充了表單類型，還給表單增加了很多新的屬性，這些屬性可以被分為以下幾類：

1）表單域所屬

新增的“form”屬性可以將當(dāng)前表單域指定給一個(gè)或多個(gè)表單，這使得表單域的歸屬和頁(yè)面位置更加靈活，無需像HTML4一樣必須將表單域放置在表單內(nèi)部。另外，HTML5提供了“formAction”、“formMethod”等屬性，這些屬性設(shè)定后可以覆蓋表單的action、method等屬性，使表單域的使用更加靈活。

2）驗(yàn)證屬性

HTML5除了內(nèi)置驗(yàn)證功能外，還提供了專門的驗(yàn)證屬性：“required”屬性具備非空驗(yàn)證功能，表單必須輸入數(shù)據(jù)才可以通過驗(yàn)證；“pattern”屬性的值是正則表達(dá)式，表單內(nèi)容如果不符合正則表達(dá)式規(guī)則將無法通過驗(yàn)證，通過“required”和“pattern”屬性使表單的驗(yàn)證功能非常完善，用戶幾乎無需編寫任何驗(yàn)證代碼就可以實(shí)現(xiàn)復(fù)雜的表單驗(yàn)證功能。

3）功能屬性

網(wǎng)頁(yè)技術(shù)不斷成熟，很多網(wǎng)頁(yè)中表單功能已經(jīng)成為一種使用習(xí)慣，HTML5將常用的表單功能進(jìn)行了規(guī)范：在頁(yè)面加載時(shí)，“autofocus”屬性可以讓輸入性表單自動(dòng)的獲取焦點(diǎn)，它取代了Javascript語(yǔ)言的focus方法；“Placeholder”屬性提供輸入性表單提示功能，在表單為空時(shí)提示信息會(huì)顯示，如果表單獲得焦點(diǎn)，提示內(nèi)容自動(dòng)消失；“auotcomplete”屬性可以設(shè)定輸入性表單自動(dòng)完成功能。

4）數(shù)據(jù)列表功能

HTML4中有下拉菜單和列表，但是文本和列表進(jìn)行組合的表單一直實(shí)現(xiàn)困難，“l(fā)ist”屬性允許將已經(jīng)定義好的數(shù)據(jù)列表指定給某一個(gè)文本，從而解決組合框的問題。

2.3 表單的優(yōu)勢(shì)分析

HTML5對(duì)表單輸入的類型和屬性都進(jìn)行擴(kuò)充，它存在的優(yōu)勢(shì)主要有以下幾方面：

1）表單繼承了原來表單簡(jiǎn)潔的特點(diǎn)。

2）輸入表單功能擴(kuò)充，以及驗(yàn)證功能的完善，用戶無需將精力集中到功能性表單的實(shí)現(xiàn)和驗(yàn)證的實(shí)現(xiàn)，更加注重頁(yè)面的設(shè)計(jì)，提高開發(fā)效率。

3）輸入表單和驗(yàn)證功能無需再使用程序?qū)崿F(xiàn)，這大量減少前端Javascript代碼量，提高了網(wǎng)頁(yè)運(yùn)行效率。

4）豐富的表單屬性保持了表單的一致性，增加了表單的靈活性。

3 結(jié)束語(yǔ)

表單作為網(wǎng)頁(yè)和用戶的數(shù)據(jù)接口，其作用非常重要，HTML5提供了更加符合當(dāng)前技術(shù)需求的表單技術(shù)，無論從GUI設(shè)計(jì)需求來講，還是從運(yùn)行效率來講，HTML5都提出了相對(duì)合理的解決方案，它更適合移動(dòng)網(wǎng)頁(yè)GUI開發(fā)，具有更好的跨平臺(tái)性。

參考文獻(xiàn)：

[1] 姜鳳燕， 段會(huì)川. HTML5新輸入類型及其對(duì)RIA界面效率支持研究[J]. 計(jì)算機(jī)技術(shù)與發(fā)展， 2015，22（5）：137-140.

[2] 沈飛. 基于HTML5的移動(dòng)教學(xué)平臺(tái)關(guān)鍵技術(shù)解析[J]. 淮海工學(xué)院學(xué)報(bào)： 自然科學(xué)版， 2014，23（4）： 26-30.

[3] Peter Lubbers，Brian Albers. Pro HTML5 Programming[M]. Apress， 2011.