HTML5中的表單

相對於 HTML4 來說，HTML5中的元素與特性提供更​​大程度上的語意標記，同時也刪除了大量在 HTML4 中因為腳本與樣式緣故而存在的冗餘元素。透過讓表單在不同網站上表現的更加一致，及時回應使用者輸入的數據，HTML5的表單特性為使用者提供了更好的使用體驗。這些體驗同樣適用於那些停用了瀏覽器腳本的使用者。

這個主題會描述那些被 Gecko/Firefox4 或更高版本所支援的一些新特性或改變的部分。

元素

的 type 特性擁有更多的值.

search: 這個元素呈現為搜尋框。換行符號會從輸入值中去掉，此外沒有其他的語法增強了。

tel: 這個元素可現為一個編輯電話號碼的輸入控制。換行符會從輸入值中去掉，此外沒有其他的語法增強了，因為電話號碼國際化差異非常明顯。你可以使用如 pattern 與 maxlength 等屬性來限制輸入到控制項中的值。

url: 這個元素呈現為一個編輯URL 的輸入控制項。換行符與首尾的空格將會自動移除。

email: 這個元素呈現為一個郵件地址。換行符會被自動移除。可以設定一個無效的郵件地址，但若滿足輸入框的限制，必須遵守在擴展的巴科斯範式(ABNF)中的規範：1( atext / "." ) "@" ldh-str 1( "." ldh-str ) 其中atext 在規範RFC 5322 section 3.2.3 中被定義,而ldh-str在規範RFC 1034 section 3.5 中被定義。 .

注意: 若設定multiple屬性， 區域中可以用逗號分割的方式，輸入多個email, 但 Firefox不支援. 元素也擁有一些新的特性。

list：

pattern： 正規表示式，用來檢查控制項的值，能夠作用於 type 值是 text， tel， search， url， 和 email 的 input 元素。

form： 一個字串，用來表示該 input 屬於哪個

元素。一個 input 只能存在於一個表單中。

formmethod：一個字串，用於表示表單提交時會使用哪個 HTTP 方法 (GET 或 POST)；如果定義了它，則可以覆寫

元素上的 method 特性。只有當 type 值為 image 或 submit，且 form 特性設定的情況下， formmethod 才能生效。

x-moz-errormessage ： 一個字串，當表單欄位驗證失敗後顯示錯誤訊息。該值為 Mozilla 擴展，並非標準。

元素

元素有了一個新特性：

novalidate：設定了該特性不會在表單提交之前對其進行驗證。

你可以使用 元素上的 list 特性來將一個特定的 input 與特定的

元素

元素表示計算的結果。

你可以使用 for 特性來在

元素與文檔內其他能夠影響運算的元素(例如，input 或參數)建立關聯。 for 特性的值是以空格做分隔的其他元素的 ID 清單。

Gecko 2.0 (其他瀏覽器並非如此) 支援為

元素自訂有效性約束(validity constraints)與錯誤訊息，可以對其使用如下CSS 偽類：:invalid， :valid， :-moz-ui -invalid，與:-moz-ui-valid。在以下情況會顯得很有用：例如計算結果違反了業務規則，但卻並非因為特定的 input 值出現錯誤(例如，「百分比總數不能超過100」)。

placeholder 特性

placeholder 特性作用於 與 元素上，提示使用者此域內能夠輸入什麼內容。 placeholder 中的文字不能包含回車與換行。

autofocus 特性

autofocus 特性讓你能夠指定一個表單控件，當頁面載入後該表單自動獲得焦點，除非用戶覆蓋它，例如在另一個控件中輸入值。一個文件內只有一個表單能夠擁有 autofocus 特性，它是一個 Boolean 值。這個特性適用於 ， ， ，與 元素。例外情況是，如果一個 autofocus 元素的 type 特性值設定成了 hidden，則 autofocus 無法生效(就是說，你無法讓一個隱藏控制項自動獲得焦點)。

label.control DOM 屬性

HTMLLabelElement DOM 介面除了為 元素提供了對應的特性外，還提供了一個額外的屬性。 control 屬性傳回被打上標籤的控件，就是 label 適用的控件，由 for 特性(如果定義的話) 或是第一個後代元素控件來決定。

約束驗證

HTML5 為客戶端表單的驗證提供了語法與 API。當然這些功能無法取代伺服器端驗證，出於安全性與資料完整性的考慮，伺服器端驗證仍然必不可少，但是客戶端驗證能夠透過輸入資料的即時回饋來提供良好的使用者體驗。

如果 元素設定了 title 特性，當驗證失敗時，特性值會顯示在提示訊息中。如果 title 設定為空字串，則不會顯示提示訊息。如果沒有設定 title 特性，會使用標準驗證資訊(例如透過 x-moz-errormessage 特性指定，或呼叫 setCustomValidity() 方法) 代為顯示。

注意： 約束驗證不支援表單中的 元素；若想基於表單的驗證結果來改變按鈕的樣式，可以使用 :-moz-submit-invalid 偽類。約束驗證的 HTML 語法

下列 HTML5 語法中的條目用於為表單資料指定約束。

, ， 和 元素上的 required 特性，指定必須提供該元素的值。 (在 <input> 元素上， required 只能與特定的 type 特性值結合起來生效。)

元素上的 pattern 特性用於限定元素值必須符合特定的正規表示式。

元素上的 min 與 max 特性限定了能夠輸入元素的最大與最小值。

元素的 step 特性(與 min 與 max 特性結合使用) 限定了輸入值的間隔。如果一個值與允許值的梯級不相符，則它無法通過驗證。

與 元素的 maxlength 特性限制了使用者能夠輸入的最大字元數(在 Unicode 代碼點內)。

type 的 url 與 email 值分別用於限制輸入值是否為有效的 URL 或電子郵件地址。

此外，若要阻止對表單進行約束驗證，你可以在

上設定 novalidate 特性，或在 與 元素(當 type 是 submit 或 image)上設定 formnovalidate 特性。這些特性指定了當表單提交時不做驗證。

約束驗證API

下面這些DOM 屬性與方法和約束驗證相關，能夠在客戶端腳本中使用：

HTMLFormElement 物件上的checkValidity() 方法，當表單的相關元素都通過了它們的約束驗證時傳回true，否則回傳false。

在 表單相關元素上：

willValidate 屬性，如果元素的約束沒有符合則值為 false。

validity 屬性，是一個 ValidityState 對象，表示元素目前所處的驗證狀態(就是說約束成功或是失敗)。

validationMessage 屬性，用於描述與元素相關約束的失敗訊息。

checkValidity() 方法，如果元素沒有滿足它的任意約束，傳回false，其他情況回傳 true。

setCustomValidity() 方法，設定自訂驗證訊息，用於即將實施與驗證的約束來覆蓋預先定義的資訊。

HTML5 Documentation

HTML 

Audio/Video Canvas WebGL SVG MathML WebForms AppCache Microformats SemanticTags

JavaScript 

SS 

NewSelectors Typography Visual Effects

更多HTML5中的表單相關文章請關注PHP中文網！