HTML5中的表單

specialCoder發表於2019-02-16

相對於 HTML4 來說,HTML5中的元素與特性提供更大程度上的語義標記,同時還刪除了大量在 HTML4 中因為指令碼與樣式緣故而存在的冗餘元素。通過讓表單在不同網站上表現的更加一致,及時響應使用者輸入的資料,HTML5的表單特性為使用者提供了更好的使用體驗。這些體驗同樣適用於那些禁用了瀏覽器指令碼的使用者。

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

<input> 元素

<input> 的 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屬性,<input> 區域中可以用逗號分割的方式,輸入多個email, 但 Firefox不支援.
<input> 元素也擁有一些新的特性。

list: <datalist> 元素的 ID,該元素的內容,<option> 元素被用作提示資訊,會在 input 的建議區域作為提議顯示出來。
pattern: 一個正規表示式,用於檢查控制元件的值,能夠作用於 type 值是 text, tel, search, url, 和 email 的 input 元素。
form: 一個字串,用於表明該 input 屬於哪個 <form> 元素。一個 input 只能存在於一個表單中。
formmethod:一個字串,用於表明表單提交時會使用哪個 HTTP 方法 (GET 或 POST);如果定義了它,則可以覆蓋 <form> 元素上的 method 特性。只有當 type 值為 image 或 submit,並且 form 特性被設定的情況下, formmethod 才能生效。
x-moz-errormessage : 一個字串,當表單欄位驗證失敗後顯示錯誤資訊。該值為 Mozilla 擴充套件,並非標準。

<form> 元素

<form> 元素有了一個新特性:

novalidate:設定了該特性不會在表單提交之前對其進行驗證。
<datalist> 元素
<datalist> 元素會在填寫 <input> 欄位時,顯示一列 <option> 作為提示。

你可以使用 <input> 元素上的 list 特性來將一個特定的 input 與特定的 <datalist> 元素做關聯。

<output> 元素

<output> 元素表示計算的結果。

你可以使用 for 特性來在 <output> 元素與文件內其他能夠影響運算的元素(例如,input 或引數)建立關聯。 for 特性的值是以空格做分隔的其他元素的 ID 列表。

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

placeholder 特性

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

autofocus 特性

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

label.control DOM 屬性

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

約束驗證

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

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

注意: 約束驗證不支援表單中的 <button> 元素;若想基於表單的驗證結果來改變按鈕的樣式,可以使用 :-moz-submit-invalid 偽類。
約束驗證的 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 或電子郵件地址。
此外,若要阻止對錶單進行約束驗證,你可以在 <form> 上設定 novalidate 特性,或在 <button> 與 <input> 元素(當 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
Storage IndexedDB WebSockets WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus
CSS
NewSelectors Typography Visual Effects

相關文章