Forms in HTML

摘要

HTML5的Form元素及其屬性比HTML4提供更大程度的語意標記,也移除了原本許多在HTML4所需要的繁瑣程式碼腳本與樣式控制。HTML5的Form元素讓表單在跨網頁上有更好的一致性,也提供即時的使用者輸入回饋,因為這些特色,HTML5的Form元素在使用者體驗上有更好的表現,甚至,這些體驗依然適用在瀏覽器關閉程式碼腳本執行的情況下。

本文旨在討論Gecko/Firefox, version 4或更新版本在新的或變更後的Form元素特色上的支援。

<input>元素

<input>元素的type屬性新增了一些屬性值。

  • search: 代表此為搜尋欄位,換行符號會自動從輸入值中刪除且沒有其他語法是必須的。
  • tel: 代表此為電話編輯欄位,換行符號會自動從輸入值中刪除且沒有其他語法是必須的。基於各國電話號碼不一,你可以利用patternmaxlength屬性來限制輸入。
  • 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>元素和其他影響計算結果的元素(如input或參數)的關係,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>元素一個新的control屬性,control屬性會回傳被標記的控制項,這個控制項便是該label適用的控制項,也就是<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">
Note: 約束驗證不支援表單的<button>元素,若是想根據表單驗證果來設定按鈕樣式,可以利用:-moz-submit-invalid pseudo-class。

約束驗證的HTML語法

下列是HTML5用來約束表單資料的語法

  • <input>, <select>,和<textarea>required屬性表示輸入不可為空。<input>元素在用required屬性時需要搭配某些特定type屬性值)
  • <input>元素的pattern屬性規範了輸入必須符合指定的正規表達式。
  • <input>元素的minmax屬性規範了最小和最大輸入值。
  • <input>元素的step屬性(和minmax屬性結合使用)規範了輸入值一次調整的幅度,當輸入值不符合允許的調整幅度即驗證失敗。
  • <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() 可以自定義驗證失敗訊息。

See also

文件標籤與貢獻者

 此頁面的貢獻者: foxbrush
 最近更新: foxbrush,