建站
咨詢
售后
建站咨詢
新聞中心
時光車輪滾滾碾來,前端之路永無止歇.對于這個前端這門精一多專的技術,任何一次技術革新,我們都必須第一時間去了解它學習它,比如Web世界里這簇美艷的花朵---HTML 5.雖然HTML 5發(fā)布之初,許多人(包括我)都覺得普及它還很遙遠,但自發(fā)布以來,許多企業(yè)級網(wǎng)站對它的嘗試應用(比如應用,比如canvas的應用),使HTML 5的邁出了一大步,隨之而來IE9的發(fā)布,無疑又讓我們看到了HTML 5離我們不再遙遠.
創(chuàng)新互聯(lián)建站自2013年創(chuàng)立以來，先為額爾古納等服務建站，額爾古納等地企業(yè)，進行企業(yè)商務咨詢服務。為額爾古納企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
推薦專題：HTML 5 下一代Web開發(fā)標準詳解
學習HTML 5半年有余了,雖然對它的離線存儲以及canvas等革新性技術還是一知半解,但我還是希望我現(xiàn)在所學到的能幫助更多的前端人學習這門毋庸置疑是新趨勢的技術.本文我將詳細介紹一下HTML 5中對表單功能的更新.。
一、表單結構更自由
XHTML中需要放在form之中的諸如inpu/button/select/textarea等標簽元素,在HTML 5中完全可以放在頁面任何位置,然后通過新增的form屬性指向元素所屬表單的ID值,即可關聯(lián)起來.
比如:
- ...
二、多樣的輸入類型(大部分新類型目前并不為所有標準瀏覽器支持,請參見樣例演示中的提示)
email輸入類型
此類型要求輸入格式正確的email地址,否則瀏覽器是不允許提交的,并會有一個錯誤信息提示.此類型在Opera中必須指定name值,否則無效果.
url輸入類型
上面代碼展示的文本域要求輸入格式正確的URL地址,Opera中會自動在開始處添加http://. 日期時間相關輸入類型(這些個很牛X的)
這一系列是很酷的一個類型,完全解決了煩瑣的JS日歷控件問題.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一樣. number輸入類型
這個不用多解釋了,要求輸入一個數(shù)字字符,若未輸入則會拋出一個錯誤.
range輸入類型
此類型將顯示一個可拖動的滑塊條,并可通過設定max/min/step值限定拖動范圍.拖動時會反饋給value一個值.
search輸入類型
此類型表示輸入的將是一個搜索關鍵字,通過results=s可顯示一個搜索小圖標.
tel輸入類型
此類型要求輸入一個電話號碼,但實際上它并沒有特殊的驗證,與text類型沒什么區(qū)別.
color輸入類型
此類型表單,可讓用戶通過顏色選擇器選擇一個顏色值,并反饋到value中.
三、新增的表單屬性
placeholder屬性
這是一個很實用的屬性,免去了用JS去實現(xiàn)點擊清除表單初始值.瀏覽器支持也還不錯,MS除了Firefox,其他標準瀏覽器都能很好的支持.
require/pattern屬性
表單驗證屬性,require類型時,若輸入值為空,則拒絕提交,并會有一個提示.上面兩種寫法都對,這個很有用.并且可以用于textarea以及hidden/image/submit類型.pattern類型為正則驗證,可以完成各種復雜的驗證.這兩種類型在Opera中必須指定name值,否則無效果.
autofocus屬性
默認聚焦屬性,可在頁面加載時聚焦到一個表單控件,類似于JS的focus().
list屬性
該屬性需要與datalist屬性共用,datalist是對選擇框的記憶,而list屬性可以為選擇框自定義記憶的內容.
max/min/step屬性
限制值的輸入范圍,以及值的輸入漸進程度,比如可在number設定輸入最大值最小值,或者在range中設定拖動階梯.
autocomplete屬性
此屬性是為表單提供自動完成功能.如果該屬性為打開狀態(tài)可很好地自動完成.一般來說,此屬性必須啟動瀏覽器的自動完成功能.
本文名稱：HTML5之表單新功能解析
瀏覽路徑：http://www.5511xx.com/article/djpopcp.html
