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"
onchange="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" onclick=" 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" onchange="checkPasswords()"></
p
>
<
p
><
label
for="password2">Confirm Password:</
label
>
<
input
type="password" id="password2" onchange="checkPasswords()"></
p
>
</
form
>
<
button
onclick="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(
""
);
}
|