HTML表單一直都是Web的核心技術之一,有了它我們才能在Web上進行各種各樣的應用。HTML5 Forms新增了許多新控件及其API,方便我們做更復雜的應用,而不用藉助其它Javascript框架,先說下表單的幾個基本知識點:
表單仍是以<form>元素作爲容器,我們可在其中設置基本的提交特性;
當用戶提交頁面時,表單仍然向服務器發送表單控件的值;
之前老版本中的表單控件,如text radio checkbox等等,都可以按原有方式使用,儘管增加了新的功能;
仍然可以使用javascript操作表單控件。
下面詳細說下HTML5中表單新增功能
1.輸入型控件
Input type |
用途 |
說明 |
|
電子郵件地址文本框 |
|
url |
網頁URL文本框 |
|
number |
數值的輸入域 |
屬性 值 描述 max number 規定允許的最大值 min number 規定允許的最小值 step number 規定合法的數字間隔(如果 step="3",則合法的數是 -3,0,3,6 等) value number 規定默認值 |
range |
特定值的範圍的數值,以滑動條顯示 |
屬性 值 描述 max number 規定允許的最大值 min number 規定允許的最小值 step number 規定合法的數字間隔(如果 step="3",則合法的數是 -3,0,3,6 等) value number 規定默認值 |
Date pickers |
日期,時間選擇器 |
僅Opera9+支持,包含date, month, week, time, datetime, datetime-local |
search |
用於搜索引擎,比如在站點頂部顯示的搜索框 |
與普通文本框用法一樣,只不過這樣更語文化 |
color |
顏色選擇器 |
僅Opera支持 |
將原本type爲text的input控件聲明爲以上特殊類型,是爲了給用戶呈現不同的輸入界面(移動平臺上支持這些不同的輸入界面,這裏就不細說),而且表單提交時會對其值做進一步的驗證。下面展示這些新表單元素,請用支持這些表單元素的瀏覽器查看,IE對其支持最差。
E-mail:
date:
range: number: color:
2. 表單新特性和函數
2.1 placeholder
當用戶還沒有輸入值時,輸入型控件可能通過placeholder向用戶顯示描述性說明文字或者提示信息,這在目前網站中很常見,一些JS框架都會提供類似功能,簡單的說下在舊版本中常用的解決方案,爲輸入控件創建一個label,然後通過CSS控制些label的位置使之覆蓋在輸入控件上面,當label獲得焦點時,瀏覽器會把焦點指向輸入控件。不過有了placeholder,新的瀏覽器就內置了這一功能,其特性值會以淺灰色樣式顯示在輸入框中,當輸入框獲得焦點並有值後,該提示信息自動消失。
如:
< p >< label for="runnername">Runner:</ label > < input id="runnername"name="runnername"
type="text" placeholder="First and last name" /> </ p > |
2.2 autocomplete
其實在IE6中,autocomplete就已經實現,不過現在這一特性終於標準化了,瀏覽器通過autocomplete特性能夠知曉是否應該保存輸入值以備將來使用,autocomplete應該用一保護用戶敏感數據,避免本地瀏覽器對它們進行不安全的存儲。
類型 |
作用 |
on |
該字段無需保護,值可以被保存和恢復 |
off |
該字段需要保護,值不可以保存 |
unspecified |
包含<form>的默認設置,如果沒有被包含在表單中或沒有指定值,則行爲表現爲on |
如:
< form action=""
method="get" autocomplete="on"> Name:< input type="text"
name="name" />< br /> E-mail:
< input type="email"
name="email" autocomplete="off" />< br /> < input type="submit"
/> </ form > |
當用戶提交過一次表單後,再次訪問,name的輸入框會提示你曾輸入的值,而email則不會提示。
2.3 autofocus
頁面載入時,我們通過autofocus指定某個表單元素獲得焦點,但每個頁面只允許出現一個autofocus,如果設置多個則相當於未指定些行爲。目前Opera10,Chromet和Safari瀏覽器支持。如果用戶有希望焦點轉移的情況下,使用使用autofocus會惹惱用戶。
2.5 list特性和datalist
通過使用list,開發人員能夠爲某個輸入型控件構造一個選值列表,其使用方法:
Webpage:
< input type="url"
list="url_list" name="link" /> < datalist id="url_list"> </ datalist > |
Webpage:
請在Opera9+或Firefox10+瀏覽器中查看。
2.6 required
required 屬性規定必須在提交之前填寫輸入域(不能爲空)。它是表單驗證最簡單的一種方式方法,使用方法:
Name:
< input type="text"
name="usr_name" required="required" /> |
2.7 pattern
pattern 屬性規定用於驗證 input 域的模式(pattern),模式(pattern) 是正則表達式。那些type爲email或url的輸入控件內置相關正則表達式,如果value不符合其正則表達式,那表單將通不過驗證,無法提交。使用方法:
Country
code: < input type="text"
name="country_code" pattern="[A-z]{3}"
title="Three letter country code" /> |
2.8 novalidate
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
如:
< form action="demo_form.asp"
method="get" novalidate="true"> E-mail:
< input type="email"
name="user_email" /> < input type="submit"
/> </ form > |
3. 表單驗證
表單驗證是一套系統,它爲終端用戶檢測無效的數據並標記這些錯誤,是一種用戶體驗的優化,讓web應用更快的拋出錯誤,但它仍不能取代服務器端的驗證,重要數據還要要依賴於服務器端的驗證,因爲前端驗證是可以繞過的。
目前任何表單元素都有八種可能的驗證約束條件:
名稱 |
用途 |
用法 |
valueMissing |
確保控件中的值已填寫 |
將required屬性設爲true, <input type="text"required="required"/> |
typeMismatch |
確保控件值與預期類型相匹配 |
<input type="email"/> |
patternMismatch |
根據pattern的正則表達式判斷輸入是否爲合法格式 |
<input type="text" pattern="[0-9]{12}"/> |
toolong |
避免輸入過多字符 |
設置maxLength,<textarea id="notes" name="notes" maxLength="100"></textarea> |
rangeUnderflow |
限制數值控件的最小值 |
設置min,<input type="number" min="0" value="20"/> |
rangeOverflow |
限制數值控件的最大值 |
設置max,<input type="number" max="100" value="20"/> |
stepMismatch |
確保輸入值符合min,max,step的設置 |
設置max min step,<input type="number" min="0" max="100" step="10" value="20"/> |
customError |
處理應用代碼明確設置能計算產生錯誤 |
例如驗證兩次輸入的密碼是否一致,等會DEMO細說 |
下面展現瀏覽器自帶的驗證功能請在Chrome、Opera或Firefox中查看:
源代碼:
< form name="register1"
id="register1"> < p >< label for="runnername">RunnerName:</ label > < input id="runnername"name="runnername"
type="text" placeholder="First and last name" required="required" autofocus="autofocus"/> </ p > < p >< label for="phone">Tel
#:</ label > < input id="phone"
name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}" placeholder="xxx-xxxx-xxxx"/></ p > < p >< label for="emailaddress">E-mail:</ label > < input id="emailaddress"
name="emailaddress" type="email" placeholder="For
confirmation only"/></ p > < p >< label for="dob">DOB:</ label > < input id="dob"
name="dob" type="date" placeholder="MM/DD/YYYY"/></ p > < p >Count:< input type="number"
id="count" name="count" min="0" max="100" step="10"/></ p > < p >< label for="style">Shirt
style:</ label > < input id="style"
name="style" type="text" list="stylelist" title="Years of participation"
autocomplete="off"/></ p > < datalist id="stylelist"> < option value="White"
label="1st Year"/> < option value="Gray"
label="2nd - 4th Year"/> < option value="Navy"
label="Veteran (5+ Years)"/> </ datalist > < fieldset > < legend >Expectations:</ legend > < p > < label for="confidence">Confidence:</ label > < input id="confidence"
name="level" type="range" οnchange="setConfidence(this.value)" min="0"
max="100" step="5" value="0"/> < span id="confidenceDisplay">0%</ span ></ p > < p >< label for="notes">Notes:</ label > < textarea id="notes"
name="notes" maxLength="100"></ textarea ></ p > </ fieldset > < p >< input type="submit"
name="register" value="Submit" οnclick=" checkForm()"/></ p > </ form > |
可是各個瀏覽器驗證行爲不一致,我們可能需要統一其驗證行爲,藉助javascript我們可以統一瀏覽器的驗證行爲。
還是以上上述HTML爲基礎,我們爲其加上相關javascript:
//自定義表單控件驗證行爲 var checkvalue
= function (e){ var el
= e.target; var isvalid
= el.checkValidity(); if (isvalid){ el.className=
"" ; el.parentElement.getElementsByTagName( "label" )[0].className= "" ; } else { el.className=
"error" ; el.parentElement.getElementsByTagName( "label" )[0].className= "error" ; } e.stopPropagation(); e.preventDefault(); } //定義表單驗證方法 function invalidHandler(evt)
{ checkvalue(evt); } function loadDemo()
{ var myform
= document.getElementById( "register1" ); //註冊表單的oninvlid事件 myform.addEventListener( "invalid" ,
invalidHandler, true ); for ( var i=0;i<
myform.elements.length-1;i++){ //註冊表單元素的onchange事件,優化用戶體驗 myform.elements[i].addEventListener( "change" ,checkvalue, false ); } } //在頁面初始化事件(onload)時註冊的自定義事件 window.addEventListener( "load" ,
loadDemo, false ); |
最後說下輸入兩次密碼匹配的驗證,寫的很簡單:
< form name="passwordChange"> < p >< label for="password1">New
Password:</ label > < input type="password"
id="password1" οnchange="checkPasswords()"></ p > < p >< label for="password2">Confirm
Password:</ label > < input type="password"
id="password2" οnchange="checkPasswords()"></ p > </ form > < button οnclick="document.passwordChange.password1.checkValidity()">Check
Validity</ button > |
function checkPasswords()
{ var pass1
= document.getElementById( "password1" ); var pass2
= document.getElementById( "password2" ); if (pass1.value
!= pass2.value) pass1.setCustomValidity( "兩次輸入的密碼不匹配" ); else pass1.setCustomValidity( "" ); } |
雖然目前HTML5新的表單控件和API在IE9還沒有得到支持,但其它主流瀏覽器都已實現或實現了大部分,所以趨勢我得跟上呵呵。