作為從事前段開(kāi)發(fā)的人員要做到精一專(zhuān)多，這就需要時(shí)刻學(xué)習(xí)***的知識(shí)，那我們就必需提到WEB開(kāi)發(fā)領(lǐng)域的HTML5.

[[19197]]

        學(xué)習(xí)HTML5半年有余了,雖然對(duì)它的離線存儲(chǔ)以及canvas等革新性技術(shù)還是一知半解,但我還是希望我現(xiàn)在所學(xué)到的能幫助更多的前端人學(xué)習(xí)這門(mén)毋庸置疑是新趨勢(shì)的技術(shù).本文我將詳細(xì)介紹一下HTML5中對(duì)表單功能的更新. 閱讀本文前建議在Opera***版中打開(kāi)樣例演示頁(yè)查看樣例演示。

 一、表單結(jié)構(gòu)更自由

       XHTML中需要放在form之中的諸如inpu/button/select/textarea等標(biāo)簽元素,在HTML5中完全可以放在頁(yè)面任何位置,然后通過(guò)新增的form屬性指向元素所屬表單的ID值,即可關(guān)聯(lián)起來(lái). 比如:

<FORM id=iform>    
 
<INPUT>    
 
    ...    
 
</FORM>    
 
<INPUT value=我在id為iform的表單外 form="foo">   
 

二、多樣的輸入類(lèi)型

(大部分新類(lèi)型目前并不為所有標(biāo)準(zhǔn)瀏覽器支持,請(qǐng)參見(jiàn)樣例演示中的提示) email輸入類(lèi)型

<INPUT type=email name=email>   

此類(lèi)型要求輸入格式正確的email地址,否則瀏覽器是不允許提交的,并會(huì)有一個(gè)錯(cuò)誤信息提示.此類(lèi)型在Opera中必須指定name值,否則無(wú)效果. url輸入類(lèi)型

<INPUT type=url>   

上面代碼展示的文本域要求輸入格式正確的URL地址,Opera中會(huì)自動(dòng)在開(kāi)始處添加http://. 日期時(shí)間相關(guān)輸入類(lèi)型(這些個(gè)很牛X的)

<INPUT type=date>    
 
<INPUT type=time>    
 
<INPUT type=month>    
 
<INPUT type=week>   

這一系列是很酷的一個(gè)類(lèi)型,完全解決了煩瑣的JS日歷控件問(wèn)題.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一樣.

number輸入類(lèi)型(這些個(gè)很牛X的)

<INPUT type=number>  

這個(gè)不用多解釋了,要求輸入一個(gè)數(shù)字字符,若未輸入則會(huì)拋出一個(gè)錯(cuò)誤.

range輸入類(lèi)型 

<INPUT type=range>  

 

此類(lèi)型將顯示一個(gè)可拖動(dòng)的滑塊條,并可通過(guò)設(shè)定max/min/step值限定拖動(dòng)范圍.拖動(dòng)時(shí)會(huì)反饋給value一個(gè)值.

search輸入類(lèi)型

<INPUT type=search>  

此類(lèi)型表示輸入的將是一個(gè)搜索關(guān)鍵字,通過(guò)results=s可顯示一個(gè)搜索小圖標(biāo).

tel輸入類(lèi)型

<INPUT type=tel>  

此類(lèi)型要求輸入一個(gè)電話號(hào)碼,但實(shí)際上它并沒(méi)有特殊的驗(yàn)證,與text類(lèi)型沒(méi)什么區(qū)別.

color輸入類(lèi)型

<INPUT type=color>  

此類(lèi)型表單,可讓用戶通過(guò)顏色選擇器選擇一個(gè)顏色值,并反饋到value中.

 三、新增的表單屬性

placeholder屬性

<INPUT placeholder="點(diǎn)擊我會(huì)以清除">  

這是一個(gè)很實(shí)用的屬性,免去了用JS去實(shí)現(xiàn)點(diǎn)擊清除表單初始值.瀏覽器支持也還不錯(cuò),MS除了Firefox,其他標(biāo)準(zhǔn)瀏覽器都能很好的支持.

require/pattern屬性

<INPUT name=require>    
 
<INPUT name=require1 required="required">    
 
<INPUT name=require2 pattern="^[1-9]\d{5}$">   

表單驗(yàn)證屬性,require類(lèi)型時(shí),若輸入值為空,則拒絕提交,并會(huì)有一個(gè)提示.上面兩種寫(xiě)法都對(duì),這個(gè)很有用.并且可以用于textarea以及hidden/image/submit類(lèi)型.pattern類(lèi)型為正則驗(yàn)證,可以完成各種復(fù)雜的驗(yàn)證.這兩種類(lèi)型在Opera中必須指定name值,否則無(wú)效果.

autofocus屬性

INPUT autofocus="true">  

默認(rèn)聚焦屬性,可在頁(yè)面加載時(shí)聚焦到一個(gè)表單控件,類(lèi)似于JS的focus().

list屬性

<INPUT list="ilist">    
 
<DATALIST id=ilist>    
 
   <OPTION label="a" value="a">    
 
   </OPTION><OPTION label="b" value="b">    
 
   </OPTION><OPTION label="c" value="c">    
 
</OPTION></DATALIST>   

該屬性需要與datalist屬性共用,datalist是對(duì)選擇框的記憶,而list屬性可以為選擇框自定義記憶的內(nèi)容.

max/min/step屬性

<INPUT type=range max="100" min="1" step="20">  

限制值的輸入范圍,以及值的輸入漸進(jìn)程度,比如可在number設(shè)定輸入***值最小值,或者在range中設(shè)定拖動(dòng)階梯.

autocomplete屬性

<INPUT autocomplete="on">  

此屬性是為表單提供自動(dòng)完成功能.如果該屬性為打開(kāi)狀態(tài)可很好地自動(dòng)完成.一般來(lái)說(shuō),此屬性必須啟動(dòng)瀏覽器的自動(dòng)完成功能.
       在本文中我給大家分享了關(guān)于HTML5的表單的一些新功能，新屬性，如果有心了解更多的話，就利用網(wǎng)絡(luò)或多看下這本書(shū)多學(xué)習(xí)一下。

【編輯推薦】

1. 10個(gè)令人驚奇的HTML5和JavaScript效果
2. HTML5迎來(lái)新Logo 成下一代Web標(biāo)準(zhǔn)無(wú)容置疑
3. Web移動(dòng)應(yīng)用的未來(lái)：使用HTML5和CSS
4. 1.1　HTML5發(fā)展史