HTML 5之表單新功能解析

2022-08-24 17:03:10 字數 2902 閱讀 4105

時光車輪滾滾碾來

,前端之路永無止歇

.對於這個前端這門精一多專的技術

,任何一次技術革新

,我們都必須第一時間去了解它學習它,比如

web世界裡這簇美豔的花朵

---html 5.

雖然html 5

發布之初

,許多人

(包括我

)都覺得普及它還很遙遠

,但自發布以來

,許多企業級**對它的嘗試應用(比如

應用,比如canvas

的應用),

使html 5

的邁出了一大步

,隨之而來

ie9的發布

,無疑又讓我們看到了

html 5

離我們不再遙遠.學習

html 5

半年有餘了

,雖然對它的離線儲存以及

canvas

等革新性技術還是一知半解

,但我還是希望我現在所學到的能幫助更多的前端人學習這門毋庸置疑是新趨勢的技術

.本文我將詳細介紹一下

html

5中對表單功能的更新.。

一、表單結構更自由

xhtml

中需要放在

form

之中的諸如

inpu/button/select/textarea

等標籤元素,在

html 5

中完全可以放在頁面任何位置

,然後通過新增的

form

屬性指向元素所屬表單的id值

,即可關聯起來.比如

:我在id為

iform

的表單外

"form="foo">

二、多樣的輸入型別(

大部分新型別目前並不為所有標準瀏覽器支援

,請參見樣例演示中的提示

)email

輸入型別

此型別要求輸入格式正確的

email位址,

否則瀏覽器是不允許提交的

,並會有乙個錯誤資訊提示

.此型別在

opera

中必須指定

name值,

否則無效果

.url

輸入型別

上面**展示的文字域要求輸入格式正確的

url位址

,opera

中會自動在開始處新增

日期時間相關輸入型別

(這些個很牛x的

)這一系列是很酷的乙個型別

,完全解決了煩瑣的

js日曆控制項問題

.但目前

ms只有

opera/chrome

新版本支援

,且展示效果也不一樣

.number

輸入型別

這個不用多解釋了

,要求輸入乙個數字字元

,若未輸入則會丟擲乙個錯誤

.range

輸入型別

此型別將顯示乙個可拖動的滑塊條

,並可通過設定

max/min/step

值限定拖動範圍

.拖動時會反饋給

value

乙個值.

search

輸入型別

此型別表示輸入的將是乙個搜尋關鍵字,通過

results=s

可顯示乙個搜尋小圖示

.tel

輸入型別

此型別要求輸入乙個**號碼

,但實際上它並沒有特殊的驗證,與

text

型別沒什麼區別

.color

輸入型別

此型別表單

,可讓使用者通過顏色選擇器選擇乙個顏色值

,並反饋到

value中.

三、新增的表單屬性

placeholder

屬性點選我會以清除

">

這是乙個很實用的屬性

,免去了用

js去實現點選清除表單初始值

.瀏覽器支援也還不錯

,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

屬性此屬性是為表單提供自動完成功能

.如果該屬性為開啟狀態可很好地自動完成

.一般來說

,此屬性必須啟動瀏覽器的自動完成功能

.

HTML5新功能總結

html5是web基礎語言的下乙個版本。參見如果說xhtml已經開始尋求取代html,那麼html5的實用性在於,它將兩種語法整合在一起,採用同樣有效的方式來表達html的抽象dom表示。html5規範結合了html4,xhtml1以及dom級別2html,並進行了相應的更新。html5取代xhtm...

HTML5新功能演示

這是乙個html5新功能的演示文件,幾乎包括html5所有激動人心的新功能的簡介和demo。ie系列瀏覽器無法瀏覽,firefox opera等瀏覽器只能使用部分功能,如果想100 演示成功,請使用最新版的 谷歌瀏覽器 google chrome 建議使用最新版。中文版演示文件請看此處 http d...

Unity5 新功能解析 GI 全域性光

面積光的光源有形狀,是乙個矩形區域,有位置,有方向,方向是超矩形的一面,矩形的背面沒有光,並且隨距離衰減直到沒有。它用於模擬大量的光源和在一起的效果,如街道,但是因為計算複雜,所以只用於烘焙 構成 可實時更新的lightmap 可實時更新的光照探頭 light probe 可實時更新的cubemap...