時光車輪滾滾碾來,前端之路永無止歇.對于這個前端這門精一多專的技術,任何一次技術革新,我們都必須第一時間去了解它學習它,比如Web世界裡這簇美豔的花朵---HTML 5.雖然HTML 5釋出之初,許多人(包括我)都覺得普及它還很遙遠,但自釋出以來,許多企業級網站對它的嘗試應用(比如<!doctype html>應用,比如canvas的應用),使HTML 5的邁出了一大步,随之而來IE9的釋出,無疑又讓我們看到了HTML 5離我們不再遙遠.
學習HTML 5半年有餘了,雖然對它的離線存儲以及canvas等革新性技術還是一知半解,但我還是希望我現在所學到的能幫助更多的前端人學習這門毋庸置疑是新趨勢的技術.本文我将詳細介紹一下HTML 5中對表單功能的更新.。
一、表單結構更自由
XHTML中需要放在form之中的諸如inpu/button/select/textarea等标簽元素,在HTML 5中完全可以放在頁面任何位置,然後通過新增的form屬性指向元素所屬表單的ID值,即可關聯起來.
比如:
<form id="iform">
<input type="text">
...
</form>
<input value="我在id為iform的表單外" form="foo">
二、多樣的輸入類型(大部分新類型目前并不為所有标準浏覽器支援,請參見樣例示範中的提示)
email輸入類型
<input type="email" name="email">
此類型要求輸入格式正确的email位址,否則浏覽器是不允許送出的,并會有一個錯誤資訊提示.此類型在Opera中必須指定name值,否則無效果.
url輸入類型
<input type="url">
上面代碼展示的文本域要求輸入格式正确的URL位址,Opera中會自動在開始處添加http://. 日期時間相關輸入類型(這些個很牛X的)
這一系列是很酷的一個類型,完全解決了煩瑣的JS月曆控件問題.但目前MS隻有Opera/Chrome新版本支援,且展示效果也不一樣. number輸入類型
<input type="date">
<input type="time">
<input type="month">
<input type="week">
這個不用多解釋了,要求輸入一個數字字元,若未輸入則會抛出一個錯誤.
range輸入類型
<input type="number">
此類型将顯示一個可拖動的滑塊條,并可通過設定max/min/step值限定拖動範圍.拖動時會回報給value一個值.
search輸入類型
<input type="search">
此類型表示輸入的将是一個搜尋關鍵字,通過results=s可顯示一個搜尋小圖示.
tel輸入類型
<input type="tel">
此類型要求輸入一個電話号碼,但實際上它并沒有特殊的驗證,與text類型沒什麼差別.
color輸入類型
<input type="color">
此類型表單,可讓使用者通過顔色選擇器選擇一個顔色值,并回報到value中.
三、新增的表單屬性
placeholder屬性
<input type="text" placeholder="點選我會以清除">
這是一個很實用的屬性,免去了用JS去實作點選清除表單初始值.浏覽器支援也還不錯,MS除了Firefox,其他标準浏覽器都能很好的支援.
require/pattern屬性
<input type="text" name="require" required="">
<input type="text" name="require1" required="required">
<input type="text" name="require2" pattern="^[1-9]/d{5}$">
表單驗證屬性,require類型時,若輸入值為空,則拒絕送出,并會有一個提示.上面兩種寫法都對,這個很有用.并且可以用于textarea以及hidden/image/submit類型.pattern類型為正則驗證,可以完成各種複雜的驗證.這兩種類型在Opera中必須指定name值,否則無效果.
autofocus屬性
<input type="text" autofocus="true">
預設聚焦屬性,可在頁面加載時聚焦到一個表單控件,類似于JS的focus().
list屬性
<input type="text" 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是對選擇框的記憶,而list屬性可以為選擇框自定義記憶的内容.
max/min/step屬性
<input type="range" max="100" min="1" step="20">
限制值的輸入範圍,以及值的輸入漸程序度,比如可在number設定輸入最大值最小值,或者在range中設定拖動階梯.
autocomplete屬性
<input type="text" autocomplete="on">
此屬性是為表單提供自動完成功能.如果該屬性為打開狀态可很好地自動完成.一般來說,此屬性必須啟動浏覽器的自動完成功能.
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)