HTML5表單實例分析

這篇文章主要介紹了HTML5表單實例分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML5表單實例分析文章都會有所收獲，下面我們一起來看看吧。

一、表單結構更自由

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

<FORM id=iform>    

<INPUT>    

    ...    

</FORM>    

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

二、多樣的輸入類型

(大部分新類型目前并不為所有標準瀏覽器支持,請參見樣例演示中的提示) email輸入類型

<INPUT type=email name=email>   

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

<INPUT type=url>   

上面代碼展示的文本域要求輸入格式正確的URL地址,Opera中會自動在開始處添加http://. 日期時間相關輸入類型(這些個很牛X的)

<INPUT type=date>    

<INPUT type=time>    

<INPUT type=month>    

<INPUT type=week>   

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

number輸入類型(這些個很牛X的)

<INPUT type=number>  

這個不用多解釋了,要求輸入一個數字字符,若未輸入則會拋出一個錯誤.

range輸入類型 

<INPUT type=range>  

此類型將顯示一個可拖動的滑塊條,并可通過設定max/min/step值限定拖動范圍.拖動時會反饋給value一個值.

search輸入類型

<INPUT type=search>  

此類型表示輸入的將是一個搜索關鍵字,通過results=s可顯示一個搜索小圖標.

tel輸入類型

<INPUT type=tel>  

此類型要求輸入一個電話號碼,但實際上它并沒有特殊的驗證,與text類型沒什么區別.

color輸入類型

<INPUT type=color>  

此類型表單,可讓用戶通過顏色選擇器選擇一個顏色值,并反饋到value中.

三、新增的表單屬性

placeholder屬性

<INPUT placeholder="點擊我會以清除">  

這是一個很實用的屬性,免去了用JS去實現點擊清除表單初始值.瀏覽器支持也還不錯,MS除了Firefox,其他標準瀏覽器都能很好的支持.

require/pattern屬性

<INPUT name=require>    

<INPUT name=require1 required="required">    

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

表單驗證屬性,require類型時,若輸入值為空,則拒絕提交,并會有一個提示.上面兩種寫法都對,這個很有用.并且可以用于textarea以及hidden/image/submit類型.pattern類型為正則驗證,可以完成各種復雜的驗證.這兩種類型在Opera中必須指定name值,否則無效果.

autofocus屬性

INPUT autofocus="true">  

默認聚焦屬性,可在頁面加載時聚焦到一個表單控件,類似于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>   

關于“HTML5表單實例分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“HTML5表單實例分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。