歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> HTML5 form表單新特性

HTML5 form表單新特性

日期:2017/3/1 10:34:50   编辑:Linux編程

HTML5 是下一代 Web 語言,它不單單是一種標記語言,更為下一代 Web 提供了全新功能,並將引領下一代 Web 實現類似桌面的應用體驗。下面介紹HTML5表單的新功能。

HTML語言作為如今編程最為廣泛的語言,具有易用、快捷、多浏覽平台兼容等特點,但是隨著時代的進步,HTML的標准卻停滯不前,這一次還在不斷開發中的HTML5標准的更新可以說給這門標記語言帶來了新的生命力。

表單是網頁中常見的控件(集)。小到網站注冊登錄,大到一個企業的數據管理系統,都基本上有表單的身影。表單之所以如此重要,主要是因為它擔負大量的用戶和網頁後台數據更新交互的任務。Web開發人員,對於網頁表單可以說又愛又恨,愛的是它方便的收集、組織數據的功能,恨的是它的功能很大程度上也就僅此而已。

一些在最終網站用戶看起來稀松平常的功能,比如說輸入類型檢查、表單校驗、錯誤提示等等,開發人員無不需要花費大量精力利用 JavaScript和DOM編程來滿足這些天然所需的功能點,而隨著Ajax的流行,出現的一些JavaScript的工具庫,比如Dojo, YUI等都提供了方便的JavaScript Widget或者API來減輕開發人員的負擔。

HTML5 Web Forms 2.0是對目前Web表單的全面提升,它在保持了簡便易用的特性的同時,增加了許多內置的控件或者控件屬性來滿足用戶的需求,並且同時減少了開發人員的編程。HTML5 主要在以下幾個方面對目前的Web表單做了改進:

一、表單結構更自由


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

二、新的控件類型

1.email輸入類型:

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

2.url輸入類型:

<input type="url" ></input>
上面代碼展示的文本域要求輸入格式正確的URL地址,Opera中會自動在開始處添加http://

3.日期時間相關輸入類型:

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

4.number輸入類型:

<input type="number"></input>
此類型將顯示一個可拖動的滑塊條,並可通過設定max/min/step值限定拖動范圍.拖動時會反饋給value一個值。

5.search輸入類型:

<input type="search"></input>
此類型表示輸入的將是一個搜索關鍵字,通過results=s可顯示一個搜索小圖標。

6.tel輸入類型:

<input type="tel"></input>
此類型要求輸入一個電話號碼,但實際上它並沒有特殊的驗證,與text類型沒什麼區別。

7.color輸入類型:

<input type="color"></input>
此類型可讓用戶通過顏色選擇器選擇一個顏色值,並反饋到value中。

三、新的表單屬性

1.placeholder屬性

<input type="text" placeholder="點擊我會以清除"></input> 這是一個很實用的屬性,免去了用JS去實現點擊清除表單初始值.浏覽器支持也還不錯,MS除了Firefox,其他標准浏覽器都能很好的支持.

2.require/pattern屬性

<input type="text" name="require" required=""></input> <input type="text" name="require1" required="required"></input> <input type="text" name="require2" pattern="^[1-9]\d{5}$"></input>
表單驗證屬性,require類型時,若輸入值為空,則拒絕提交,並會有一個提示.上面兩種寫法都對,這個很有用.並且可以用於textarea以及hidden/image/submit類型.pattern類型為正則驗證,可以完成各種復雜的驗證.這兩種類型在Opera中必須指定name值,否則無效果。

3.autofocus屬性

<input type="text" autofocus="true"></input>
默認聚焦屬性,可在頁面加載時聚焦到一個表單控件,類似於JS的focus()。

4.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> </input> 該屬性需要與datalist屬性共用,datalist是對選擇框的記憶,而list屬性可以為選擇框自定義記憶的內容。

5.max/min/step屬性:

<input type="range" max="100" min="1" step="20">
限制值的輸入范圍,以及值的輸入漸進程度,比如可在number設定輸入最大值最小值,或者在range中設定拖動階梯。

6.autocomplete屬性:

<input type="text" autocomplete="on"> 此屬性是為表單提供自動完成功能.如果該屬性為打開狀態可很好地自動完成.一般來說,此屬性必須啟動浏覽器的自動完成功能.

7.data屬性:

<select data="http://domain/getmyoptions"></select>
要為一個select下拉別表動態的添加非常多的選項,這些選項大多數都是來自數據庫,比如說國家、省市列表等等。這個事情非常繁瑣。HTML5將支持data屬性,為select控件外聯數據源!

8.XML Submission編碼格式

我們一般常見的是Web Form的編碼格式是application/x-www-form-urlencoded。開發人員都很清楚這種格式,數據送到服務器端,可以方便的存取。HTML5提供一種新的數據格式:XML Submission,即application/x-www-form+xml。簡單的舉例說,服務器端將直接接收到XML形式的表單數據。

HTML5對表單控件的更新,無疑是很振奮人心的。相信隨著標准的深入開發以及浏覽器對HTML5支持程度的進一步提升,設計一個簡單易用的表單的工作,將變得非常輕松。

Copyright © Linux教程網 All Rights Reserved