摘要
HTML5的Form元素及其屬性比HTML4提供更大程度的語意標記，也移除了原本許多在HTML4所需要的繁瑣程式碼腳本與樣式控制。HTML5的Form元素讓表單在跨網頁上有更好的一致性，也提供即時的使用者輸入回饋，因為這些特色，HTML5的Form元素在使用者體驗上有更好的表現，甚至，這些體驗依然適用在瀏覽器關閉程式碼腳本執行的情況下。
本文旨在討論Gecko/Firefox, version 4或更新版本在新的或變更後的Form元素特色上的支援。
<input>元素
search: 代表此為搜尋欄位，換行符號會自動從輸入值中刪除且沒有其他語法是必須的。tel: 代表此為電話編輯欄位，換行符號會自動從輸入值中刪除且沒有其他語法是必須的。基於各國電話號碼不一，你可以利用pattern和maxlength屬性來限制輸入。url: 代表此為URL編輯欄位，換行符號與前後空白符號會自動從輸入值中刪除。-
email: 代表此為email欄位，換行符號會自動從輸入值中刪除。只有在輸入符合ABNF規範: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )，其中atext定義在RFC 5322 section 3.2.3，而ldh-str定義在RFC 1034 section 3.5。Note: 當有設定multiple屬性時，可以用逗號分隔email來一次輸入多個email，但目前FireFox不支援此功能。
<input>元素同時也新增了一些屬性:
list: <datalist>元素的ID，這個元素下的內容，亦即<option>元素的值會顯示在輸入欄位的建議區來用於提示訊息。pattern: 一個用來檢查輸入的正規表達式(regular expression)，當type屬性值為text, tel, search, url與email時可以使用。form: 指示該<input>隸屬於哪一個<form>元素的一串文字，一個input只能隸屬於一個form下。formmethod: 指示使用的HTTP方法(GET或POST)，這個屬性值會取代<form>元素下method屬性所定義的HTTP方法。這個屬性只有在form屬性出現而且type值為image或submit時才有效。x-moz-errormessage: 當欄位驗證失敗時顯示的訊息，此為Mozilla擴充功能、非標準。
<form>元素
<form> 元素新增了一些屬性
novalidate: 當表單送出時，阻止表單驗證。
<datalist>元素
<datalist>元素是<option>元素的列表，<option>元素會用於提示輸入建議。
可以利用<input>的list屬性來連結<input>元素與<datalist>
<output>元素
<output>
可以利用for屬性來設定<output>for屬性的值為一串以空白分隔的元素ID。
Gecko2.0(不一定適用其他瀏覽器引擎)支援自定義<output>元素的驗證條件和錯誤訊息，所以提供了其:invalid, :valid, :-moz-ui-invalid和 :-moz-ui-valid的CSS pseudo-class，在以下狀況這個特色將很有用，例如沒有輸入值有問題，但計算結果違反了商業規則(好比說總百分比不可超過100)。
placeholder屬性
<input><textarea>placeholder屬性會在輸入欄位上顯示輸入提示，這個屬性的值不可以含有回車或換行符號。
autofocus屬性
autofocus屬性指示除非使用者另有指定(例如在其他控制項上進行輸入操作)，否則當載入網頁時表單控制項要自動聚焦於特定元素上；autofocus屬性值為布林值(Boolean)，一份文件只能有一份表單設定autofocus屬性。能夠設定這個屬性的元素有<input><button><select><textarea>type屬性為隱藏(hidden)下，autofocus是無效的，也就是說，不能自動聚焦於隱藏元素上。
label.control DOM屬性
HTMLLabelElement DOM介面提供了<label>for屬性指定的元素(如果有的話)或是第一個後代控制項元素。
約束驗證
HTML5提供了客戶端表單驗證的語法和API，基於安全性與資料正確性，雖然這並不能取代伺服器端驗證，但是客戶端驗證可以提拱使用者更好的立即輸入回饋體驗。
當<input>元素設定了title屬性，其值會作為提示框之內容，若是驗證失敗，提示框的內容會換成相關的錯誤訊息，我們可以利用非標準的x-moz-errormessage屬性或setCustomValidity()方法來自定義錯誤訊息。
<input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail">
<button>元素，若是想根據表單驗證果來設定按鈕樣式，可以利用:-moz-submit-invalid pseudo-class。約束驗證的HTML語法
下列是HTML5用來約束表單資料的語法
<input>,<select>,和<textarea>的required屬性表示輸入不可為空。<input>元素在用required屬性時需要搭配某些特定type屬性值)<input>元素的pattern屬性規範了輸入必須符合指定的正規表達式。<input>元素的min和max屬性規範了最小和最大輸入值。<input>元素的step屬性(和min和max屬性結合使用)規範了輸入值一次調整的幅度，當輸入值不符合允許的調整幅度即驗證失敗。<input>和<textarea>元素的maxlength屬性規範了最大輸入字元數(以Unicode編碼計算)。type值的url和email表示輸入必須是合格的URL或email格式。
另外，我們可以在<form>元素上設定novalidate屬性或是在<button>元素以及type為submit或image的<input>元素上設定formnovalidate屬性來避免輸入約束驗證。這些屬性都會指示表單送出時不要進行驗證。
約束驗證API
下列是客戶端驗證可用的DOM屬性和方法:
HTMLFormElement物件有checkValidity()方法會回傳true當表單下所有元素都通過約束驗證，false當任一沒有通過。- 表單相關元素:
willValidate屬性為false若該元素沒有通過驗證。validity屬性(ValidityState物件)代表該元素目前的驗證結果。validationMessage屬性是驗證失敗時的訊息。checkValidity()方法會回傳true當表單下所有元素都通過約束驗證，false當任一沒有通過。setCustomValidity()可以自定義驗證失敗訊息。