時光車輪滾滾碾來,前端之路永無止歇.對於這個前端這門精一多專的技術,任何一次技術革新,我們都必須第一時間去瞭解它學習它,比如Web世界里這簇美艷的花朵 HTML5.雖然HTML5發佈之初,許多人(包括我)都覺得普及它還很遙遠,但自發佈以來,許多企業級網站對它的嘗試應用(比如<!doctype htm
請在新版標準瀏覽器(Chrome/Opera/Firefox/Safari...)中瀏覽本文中的樣例,否則你看到的只是一個個空白的表單! ⊙﹏⊙‖∣
時光車輪滾滾碾來,前端之路永無止歇.對於這個前端這門精一多專的技術,任何一次技術革新,我們都必須第一時間去瞭解它學習它,比如Web世界里這簇美艷的花朵---HTML5.雖然HTML5發佈之初,許多人(包括我)都覺得普及它還很遙遠,但自發佈以來,許多企業級網站對它的嘗試應用(比如<!doctype html>應用,比如canvas的應用),使HTML5的邁出了一大步,隨之而來IE9的發佈,無疑又讓我們看到了HTML5離我們不再遙遠. 學習HTML5半年有餘了,雖然對它的離線存儲以及canvas等革新性技術還是一知半解,但我還是希望我現在所學到的能幫助更多的前端人學習這門毋庸置疑是新趨勢的技術.本文我將詳細介紹一下HTML5中對錶單功能的更新. 閱讀本文前建議在Opera最新版中打開樣例演示頁查看樣例演示 一、表單結構更自由 XHTML中需要放在form之中的諸如inpu/button/select/textarea等標簽元素,在HTML5中完全可以放在頁面任何位置,然後通過新增的form屬性指向元素所屬表單的ID值,即可關聯起來. 比如:
| 1 2 3 4 5 |
<form id="iform">
<input type="text">
...
</form>
<input form="foo" value="我在id為iform的表單外">
|
二、多樣的輸入類型(大部分新類型目前並不為所有標準瀏覽器支持,請參見樣例演示中的提示) email輸入類型
| 1 |
<input name="email" type="email">
|
此類型要求輸入格式正確的email地址,否則瀏覽器是不允許提交的,並會有一個錯誤信息提示.此類型在Opera中必須指定name值,否則無效果. url輸入類型
| 1 |
<input type="url">
|
上面代碼展示的文本域要求輸入格式正確的URL地址,Opera中會自動在開始處添加http://. 日期時間相關輸入類型(這些個很牛X的)
| 1 2 3 4 |
<input type="date">
<input type="time">
<input type="month">
<input type="week">
|
這一系列是很酷的一個類型,完全解決了煩瑣的JS日曆控制項問題.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一樣. number輸入類型(這些個很牛X的)
| 1 |
<input type="number">
|
這個不用多解釋了,要求輸入一個數字字元,若未輸入則會拋出一個錯誤. range輸入類型
| 1 |
<input type="range">
|
此類型將顯示一個可拖動的滑塊條,並可通過設定max/min/step值限定拖動範圍.拖動時會反饋給value一個值. search輸入類型
| 1 |
<input type="search">
|
此類型表示輸入的將是一個搜索關鍵字,通過results=s可顯示一個搜索小圖標. tel輸入類型
| 1 |
<input type="tel">
|
此類型要求輸入一個電話號碼,但實際上它並沒有特殊的驗證,與text類型沒什麼區別. color輸入類型
| 1 |
<input type="color">
|
此類型表單,可讓用戶通過顏色選擇器選擇一個顏色值,並反饋到value中. 三、新增的表單屬性 placeholder屬性
| 1 |
<input placeholder="點擊我會以清除" type="text">
|
這是一個很實用的屬性,免去了用JS去實現點擊清除表單初始值.瀏覽器支持也還不錯,MS除了Firefox,其他標準瀏覽器都能很好的支持. require/pattern屬性
| 1 2 3 |
<input name="require" type="text">
<input required="required" name="require1" type="text">
<input pattern="^[1-9]\d{5}$" name="require2" type="text">
|
表單驗證屬性,require類型時,若輸入值為空,則拒絕提交,並會有一個提示.上面兩種寫法都對,這個很有用.並且可以用於textarea以及hidden/image/submit類型.pattern類型為正則驗證,可以完成各種複雜的驗證.這兩種類型在Opera中必須指定name值,否則無效果. autofocus屬性
| 1 |
<input autofocus="true" type="text">
|
預設聚焦屬性,可在頁面載入時聚焦到一個表單控制項,類似於JS的focus(). list屬性
| 1 2 3 4 5 6 |
<input list="ilist" type="text">
<datalist id="ilist">
<option value="a" label="a">
</option><option value="b" label="b">
</option><option value="c" label="c">
</option></datalist>
|
該屬性需要與datalist屬性共用,datalist是對選擇框的記憶,而list屬性可以為選擇框自定義記憶的內容. max/min/step屬性
| 1 |
<input step="20" min="1" max="100" type="range">
|
限制值的輸入範圍,以及值的輸入漸進程度,比如可在number設定輸入最大值最小值,或者在range中設定拖動階梯. autocomplete屬性
| 1 |
<input autocomplete="on" type="text">
|
此屬性是為表單提供自動完成功能.如果該屬性為打開狀態可很好地自動完成.一般來說,此屬性必須啟動瀏覽器的自動完成功能.
路漫漫其修遠兮，吾將上下而求索.前端之路,學無止盡.痛並快樂著. ╰(￣▽￣)╮
