HTML 中的表单
HTML 中的表單
HTML5中的表單元素和屬性提供了比HTML4更大程度的語義標(biāo)記，并消除了HTML4中所需的乏味的腳本和樣式的大量需要。HTML5中的表單功能為用戶提供了更好的體驗，使表單在不同網(wǎng)站之間更一致，并向用戶提供有關(guān)數(shù)據(jù)輸入的即時反饋。它們還為在瀏覽器中禁用腳本的用戶提供這種體驗。 本文總結(jié)了HTML5中引入的HTML表單的更改。有關(guān)使用表單的詳細(xì)指南，請參閱我們豐富的HTML表單指南。
<input>?元素
<input>?的?type?特性擁有更多的值.
- search: 這個元素呈現(xiàn)為一個搜索框。換行符會從輸入值中去掉，此外沒有其他的語法增強了。
- tel: 這個元素可現(xiàn)為一個編輯電話號碼的輸入控件。換行符會從輸入值中去掉，此外沒有其他的語法增強了，因為電話號碼國際化差異非常明顯。你可以使用如?pattern?與?maxlength?等屬性來限制輸入到控件中的值。
- url: 這個元素呈現(xiàn)為一個編輯URL?的輸入控件。換行符與首尾的空格將會被自動去除。
-
email: 這個元素呈現(xiàn)為一個郵件地址。換行符會被自動去除?？梢栽O(shè)置一個無效的郵件地址，但若滿足輸入框的限制，必須遵守在擴展的巴科斯范式(ABNF)中的規(guī)范：1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )?其中atext?在規(guī)范RFC 5322 section 3.2.3?中被定義,而ldh-str在規(guī)范RFC 1034 section 3.5?中被定義。.
注意:?若設(shè)置multiple屬性，<input>?區(qū)域中可以用逗號分割的方式，輸入多個email, 但 Firefox不支持.
?<input>?元素也擁有一些新的特性。
- list：?<datalist>?元素的 ID，該元素的內(nèi)容，<option>?元素被用作提示信息，會在 input 的建議區(qū)域作為提議顯示出來。
- pattern： 一個正則表達(dá)式，用于檢查控件的值，能夠作用于?type?值是?text，?tel，?search，?url，?和?email 的 input 元素。
- form： 一個字符串，用于表明該 input 屬于哪個?<form>?元素。一個 input 只能存在于一個表單中。
- formmethod：一個字符串，用于表明表單提交時會使用哪個 HTTP 方法 (GET 或 POST)；如果定義了它，則可以覆蓋 ?<form>?元素上的?method?特性。只有當(dāng)?type?值為?image?或?submit，并且?form?特性被設(shè)置的情況下，?formmethod?才能生效。
- x-moz-errormessage?： 一個字符串，當(dāng)表單字段驗證失敗后顯示錯誤信息。該值為 Mozilla 擴展，并非標(biāo)準(zhǔn)。
<form>?元素
<form>?元素有了一個新特性：
- novalidate：設(shè)置了該特性不會在表單提交之前對其進行驗證。
<datalist> 元素
<datalist>?元素會在填寫?<input>?字段時，顯示一列?<option>?作為提示。
你可以使用?<input>?元素上的?list?特性來將一個特定的 input 與特定的?<datalist>?元素做關(guān)聯(lián)。
<output>?元素
<output>?元素表示計算的結(jié)果。
你可以使用?for?特性來在?<output>?元素與文檔內(nèi)其他能夠影響運算的元素(例如，input 或參數(shù))建立關(guān)聯(lián)。?for?特性的值是以空格做分隔的其他元素的 ID 列表。
?Gecko 2.0 (其他瀏覽器并非如此) 支持為?<output>?元素自定義有效性約束(validity constraints)與錯誤信息，可以對其使用如下 CSS 偽類：:invalid，?:valid，?:-moz-ui-invalid，與?:-moz-ui-valid。在如下情況會顯得很有用：例如計算結(jié)果違反了業(yè)務(wù)規(guī)則，但卻并非因為特定的 input 值出現(xiàn)錯誤(例如，「百分比總數(shù)不能超過100」)。
placeholder 特性
placeholder?特性作用于?<input>?與?<textarea>?元素上，提示用戶此域內(nèi)能夠輸入什么內(nèi)容。placeholder 中的文本不能包含回車與換行。
autofocus 特性
autofocus?特性讓你能夠指定一個表單控件，當(dāng)頁面載入后該表單自動獲得焦點，除非用戶覆蓋它，例如在另一個控件中輸入值。一個文檔內(nèi)只有一個表單能夠擁有?autofocus?特性，它是一個 Boolean 值。這個特性適用于?<input>，?<button>，?<select>，與?<textarea>?元素。例外情況是，如果一個?autofocus?元素的?type?特性值設(shè)置成了?hidden，則?autofocus?無法生效(就是說，你無法讓一個隱藏控件自動獲得焦點)。
label.control DOM 屬性
HTMLLabelElement?DOM 接口除了為?<label>?元素提供了對應(yīng)的特性外，還提供了一個額外的屬性。?control?屬性返回被打上標(biāo)簽的控件，就是 label 適用的控件，由?for?特性(如果定義的話) 或是第一個后代元素控件來確定。
約束驗證
HTML5 為客戶端表單的驗證提供了語法與 API。當(dāng)然這些功能無法取代服務(wù)器端驗證，出于安全性與數(shù)據(jù)完整性的考慮，服務(wù)器端驗證仍然必不可少，但是客戶端驗證能夠通過對輸入數(shù)據(jù)的即時反饋來提供良好的用戶體驗。
如果?<input>?元素設(shè)置了?title 特性，當(dāng)驗證失敗時，特性值會顯示在提示信息中。如果?title?設(shè)置為空字符串，則不會顯示提示信息。如果沒有設(shè)置?title?特性，會使用標(biāo)準(zhǔn)驗證信息(例如通過?x-moz-errormessage?特性指定，或調(diào)用?setCustomValidity()?方法) 代為顯示。
注意：?約束驗證不支持表單中的?<button>?元素；若想基于表單的驗證結(jié)果來改變按鈕的樣式，可以使用?:-moz-submit-invalid?偽類。約束驗證的 HTML 語法
下列 HTML5 語法中的條目用于為表單數(shù)據(jù)指定約束。
- <input>,?<select>， 和?<textarea>?元素上的?required?特性，指定必須提供該元素的值。(在?<input>?元素上，?required?只能與特定的?type?特性值結(jié)合起來生效。)
- <input>?元素上的?pattern?特性用于限定元素值必須匹配一個特定的正則表達(dá)式。
- <input>?元素上的?min?與?max?特性限定了能夠輸入元素的最大與最小值。
- <input>?元素的?step?特性(與?min?與?max?特性結(jié)合使用) 限定了輸入值的間隔。如果一個值與允許值的梯級不相符，則它無法通過驗證。
- <input>?與?<textarea>?元素的?maxlength?特性限制了用戶能夠輸入的最大字符數(shù)(在 Unicode 代碼點內(nèi))。
- type?的?url?與?email?值分別用于限制輸入值是否為有效的 URL 或電子郵件地址。
此外，若要阻止對表單進行約束驗證，你可以在?<form>?上設(shè)置?novalidate?特性，或在?<button>?與?<input>?元素(當(dāng)?type?是?submit?或?image)上設(shè)置?formnovalidate?特性。這些特性指定了當(dāng)表單提交時不做驗證。
約束驗證 API
下面這些 DOM 屬性與方法和約束驗證相關(guān)，能夠在客戶端腳本中使用：
- HTMLFormElement?對象上的?checkValidity()?方法，當(dāng)表單的相關(guān)元素都通過了它們的約束驗證時返回 true，否則返回 false。
- 在?表單相關(guān)元素上：
- willValidate?屬性，如果元素的約束沒有被符合則值為 false。
- validity?屬性，是一個?ValidityState?對象，表示元素當(dāng)前所處的驗證狀態(tài)(就是說約束成功或是失敗)。
- validationMessage?屬性，用于描述與元素相關(guān)約束的失敗信息。
- checkValidity()?方法，如果元素沒有滿足它的任意約束，返回false，其他情況返回 true。
- setCustomValidity()?方法，設(shè)置自定義驗證信息，用于即將實施與驗證的約束來覆蓋預(yù)定義的信息。
總結(jié)
- 上一篇： HTML 入门
- 下一篇： 如何制作快速加载的HTML页面