HTML5中的表單-H5教程-PHP中文網

相對於 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：元素的 ID，該元素的內容，

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

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

元素有了一個新特性：

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 值。這個特性適用於，

label.control DOM 屬性

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

約束驗證

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

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

注意：約束驗證不支援表單中的

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

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

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

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

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

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

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

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

上設定 novalidate 特性，或在