[轉(zhuǎn)載]利用 HTML5 美化表單

對(duì)表單感興趣的人并不多，但 HTML5 引入的一些重大改進(jìn)卻同時(shí)方便了創(chuàng)建表單的開(kāi)發(fā)人員和填寫(xiě)表單的用戶(hù)。全新的表單元素、屬性、輸入類(lèi)型、基于瀏覽器的驗(yàn)證、CSS3 樣式技術(shù)以及 FormData 對(duì)象讓創(chuàng)建表單變得更輕松，甚至可能更富有趣味性。

There is even more up to date forms guidance on our new?Web Fundamentals site.

瀏覽器支持

在撰寫(xiě)本文時(shí)，所有新的表單和輸入元素以及屬性和類(lèi)型的支持情況都會(huì)因?yàn)g覽器的不同而存在很大差異。甚至在支持特定功能的各個(gè)瀏覽器之間，它們的行為也會(huì)互不相同。但 HTML5 表單的支持情況變化很快，且仍在不斷改進(jìn)。在撰寫(xiě)本文時(shí)，這些圖表是我能找到的最新圖表，它們?cè)敿?xì)說(shuō)明了各個(gè)瀏覽器對(duì) HTML5 表單的支持情況。

新增內(nèi)容概述

新元素

HTML5 引入了 5 種有關(guān)輸入和表單的新元素。

元素 用途 注釋

progress	用于表示任務(wù)已完成。	progress?元素可用于表示文件的上傳進(jìn)程。
meter	用于表示已知范圍內(nèi)的標(biāo)量測(cè)量值。	meter?元素可用于表示溫度或重量等測(cè)量值。
datalist	用于表示一組?option?元素，您可以將這些元素與新輸入屬性?list配合使用，以制作下拉菜單。	如果對(duì)焦到帶有數(shù)據(jù)表的輸入，系統(tǒng)就會(huì)顯示一個(gè)下拉菜單，其中包含?datalist?中的值。
keygen	用于生成密鑰對(duì)的控件。	提交表單時(shí)，系統(tǒng)會(huì)將私鑰保存在本地密鑰庫(kù)中，并將公鑰發(fā)送到服務(wù)器。
output	用于顯示計(jì)算結(jié)果。	例如，output?元素可用于顯示兩個(gè)輸入元素值的總和。

新輸入類(lèi)型

HTML5 引入了 13 種新的輸入類(lèi)型。如果在不支持這些輸入類(lèi)型的瀏覽器中查看，系統(tǒng)就會(huì)使用后備的文字輸入。

輸入類(lèi)型 用途 注釋

tel	用于輸入電話(huà)號(hào)碼。	tel?不執(zhí)行特定語(yǔ)法，因此如果您想確保特定的格式，可以使用?pattern?或setCustomValidity()?執(zhí)行額外的驗(yàn)證。
search	用于提示用戶(hù)輸入要搜索的文字。	search?和?text?之間的區(qū)別主要在于樣式上。使用?search?輸入類(lèi)型可能會(huì)導(dǎo)致輸入字段的樣式與平臺(tái)的搜索字段相一致。
url	用于輸入單個(gè)網(wǎng)址。	url?用于輸入單個(gè)表示很大范圍值的絕對(duì)網(wǎng)址。
email	用于輸入單個(gè)電子郵件地址或電子郵件地址列表。	如果指定了?multiple?屬性，就可以輸入多個(gè)電子郵件地址，以逗號(hào)分隔。
datetime	用于輸入時(shí)區(qū)設(shè)置為 UTC 的日期和時(shí)間。	?
date	用于輸入不含時(shí)區(qū)的日期。	?
month	用于輸入含年份和月份但不含時(shí)區(qū)的日期。	?
week	用于輸入含年份和周數(shù)但不含時(shí)區(qū)的日期。	例如，此格式的日期 2011-W05 表示 2011 年的第 5 周。
time	用于輸入含小時(shí)、分鐘、秒和秒的小數(shù)部分但不含時(shí)區(qū)的時(shí)間值。	?
datetime-local	用于輸入不含時(shí)區(qū)的日期和時(shí)間。	?
number	用于輸入數(shù)字。	有效值為浮點(diǎn)數(shù)。
range	用于輸入數(shù)字，但與?number?的區(qū)別在于無(wú)需輸入具體數(shù)字。	在大部分支持該類(lèi)型的瀏覽器中，范圍控件的實(shí)施形式為滑塊。
color	用于通過(guò)顏色池控件選擇顏色。	值必須為有效的小寫(xiě)簡(jiǎn)單顏色，例如 #ffffff。

新輸入屬性

HTML5 還為輸入和表單元素引入了幾種新屬性。

屬性 用途 注釋

autofocus	用于在網(wǎng)頁(yè)加載后對(duì)焦到相關(guān)元素上的輸入。	autofocus?的目標(biāo)可以是輸入、選擇、文本區(qū)域和按鈕。
placeholder	用于提示用戶(hù)應(yīng)輸入的數(shù)據(jù)類(lèi)型。	在對(duì)焦到相關(guān)元素以及用戶(hù)輸入數(shù)據(jù)之前，系統(tǒng)會(huì)以淺色文字顯示占位符值。您可以在輸入和文本區(qū)域中指定該值。
form	用于指定輸入元素所屬的一或多個(gè)表單。	借助?form?屬性，您可以將輸入元素放在網(wǎng)頁(yè)的任何位置上，而不是只能放在表單元素中。同時(shí)，單個(gè)輸入元素可與多個(gè)表單關(guān)聯(lián)。
required	用于表示必填元素的布爾值屬性。	required?屬性有助于在不使用自定義 JavaScript 的情況下執(zhí)行基于瀏覽器的驗(yàn)證。
autocomplete	用于指定瀏覽器不應(yīng)根據(jù)用戶(hù)的歷史記錄自動(dòng)填充或預(yù)先填充某個(gè)字段。	autocomplete?屬性可用于信用卡號(hào)或一次性密碼等您不想自動(dòng)填充的字段。默認(rèn)情況下，autocomplete?處于?on?狀態(tài)，因此如果您想停用該屬性，請(qǐng)將其設(shè)置為?off。
pattern	用于根據(jù)正則表達(dá)式驗(yàn)證元素的值。	在使用?pattern?時(shí)，您也應(yīng)指定?title?值，以便向用戶(hù)提供預(yù)期模式的說(shuō)明。
dirname	用于隨表單提交控件的方向。	例如，如果用戶(hù)按從右到左的方向輸入文本數(shù)據(jù)，且輸入元素包含?dirname?屬性，那么系統(tǒng)就會(huì)將指明從右到左方向的內(nèi)容隨輸入值一起提交。
novalidate	在表單元素上指定該屬性即可停用表單提交驗(yàn)證。	?
formaction	用于覆蓋表單元素上的 action 屬性。	input?和?button?元素支持此屬性。
formenctype	用于覆蓋表單元素上的 enctype 屬性。	input?和?button?元素支持此屬性。
formmethod	用于覆蓋表單元素上的 method 屬性。	input?和?button?元素支持此屬性。
formnovalidate	用于覆蓋表單元素上的 novalidate 屬性。	input?和?button?元素支持此屬性。
formtarget	用于覆蓋表單元素上的 target 屬性。	input?和?button?元素支持此屬性。

FormData 對(duì)象

在對(duì)?XMLHttpRequest?的多項(xiàng)改進(jìn)中，有一項(xiàng)是引入了?FormData?對(duì)象。借助 FormData 對(duì)象，您可以創(chuàng)建并發(fā)送一組密鑰/值對(duì)，也可以選擇使用 XMLHttpRequest 創(chuàng)建并發(fā)送文件。使用此技術(shù)時(shí)，數(shù)據(jù)的發(fā)送格式與您通過(guò)表單的帶?multipart/form-data?編碼類(lèi)型的?submit()?方法提交的數(shù)據(jù)相同。

FormData 提供了一種方法，供您使用 JavaScript 即時(shí)創(chuàng)建 HTML 表單，然后使用?XMLHttpRequest.send()提交表單。下面是一個(gè)簡(jiǎn)單的示例：

var formData = new FormData(); formData.append("part_num", "123ABC"); formData.append("part_price", 7.95); formData.append("part_image", somefile)var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData);

您也可以在提交表單前使用 FormData 將其他數(shù)據(jù)添加到現(xiàn)有表單中。

var formElement = document.getElementById("someFormElement"); var formData = new FormData(formElement); formData.append("part_description", "The best part ever!");var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData);

基于瀏覽器的驗(yàn)證

實(shí)話(huà)實(shí)說(shuō)吧，驗(yàn)證表單數(shù)據(jù)是一項(xiàng)十分令人厭煩的任務(wù)，但無(wú)論如何您都要去做。現(xiàn)在，為了執(zhí)行客戶(hù)端表單驗(yàn)證，您可能會(huì)編寫(xiě)一些自定義 JavaScript 代碼或使用庫(kù)執(zhí)行某些操作，例如檢查有效輸入或在表單提交前確保必填字段均已填寫(xiě)。

與 CSS 偽類(lèi)選擇器配合使用的?required?和?pattern?等新輸入屬性可讓您更輕松地編寫(xiě)檢查代碼并向用戶(hù)顯示反饋。借助其他一些先進(jìn)的驗(yàn)證技術(shù)，您還可以使用 JavaScript 設(shè)置自定義驗(yàn)證規(guī)則和訊息，或者確定元素是否無(wú)效以及無(wú)效原因。

required?屬性

在提交表單時(shí)，帶?required?屬性的字段必須包含值。以下必填電子郵件地址輸入字段的示例用于確保該字段包含一個(gè)值，且這個(gè)值是有效的電子郵件地址（具體定義請(qǐng)點(diǎn)擊此處）。

<input type="email" id="email_addr" name="email_addr" required />

pattern?屬性

您可以通過(guò)?pattern?屬性指定用于驗(yàn)證輸入字段的正則表達(dá)式。此示例表示一個(gè)部件號(hào)的必填文本輸入字段。在此示例中，我們假設(shè)部件號(hào)由三個(gè)大寫(xiě)字母和緊隨其后的四個(gè)數(shù)字組成。使用?required?和?pattern?可確保該字段包含一個(gè)值，且這個(gè)值符合部件號(hào)的正確格式。如果用戶(hù)將鼠標(biāo)懸停在該字段上，系統(tǒng)就會(huì)顯示?title?屬性中的訊息。

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>

在此示例的基礎(chǔ)上，如果輸入的部件號(hào)無(wú)效，您也可以將輸入字段的邊框描成紅色。要在值無(wú)效的情況下在輸入字段周?chē)@示紅色邊框，請(qǐng)?zhí)砑右韵?CSS。

:invalid {border: 2px solid #ff0000; }

formnovalidate?屬性

formnovalidate?屬性適用于?input?或?button?元素。使用該屬性可停用表單提交驗(yàn)證。在以下示例中，通過(guò)“提交”按鈕提交表單需要有效輸入，但通過(guò)“保存”按鈕提交則不需要。

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/> <input type="submit" formnovalidate value="Save"> <input type="submit" value="Submit">

constraint validation API

constraint validation API?為您提供了處理自定義驗(yàn)證的強(qiáng)大工具。您可以通過(guò)該 API 執(zhí)行設(shè)置自定義錯(cuò)誤、檢查元素是否有效以及確定元素?zé)o效原因等操作。在以下示例中，如果兩個(gè)字段中的值不一致，系統(tǒng)就會(huì)顯示自定義錯(cuò)誤。

<label>Email:</label> <input type="email" id="email_addr" name="email_addr"><label>Repeat Email Address:</label> <input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)"><script>function check(input) {if (input.value != document.getElementById('email_addr').value) {input.setCustomValidity('The two email addresses must match.');} else {// input is valid -- reset the error messageinput.setCustomValidity('');}} </script>

綜合使用

以下預(yù)訂請(qǐng)求表單示例綜合使用了各種輸入類(lèi)型、表單驗(yàn)證以及 CSS 選擇器和樣式。

表單的 HTML 和 JavaScript 如下：

<form oninput="total.value = (nights.valueAsNumber * 99) + ((guests.valueAsNumber - 1) * 10)"><label>Full name:</label><input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required><label>Email address:</label><input type="email" id="email_addr" name="email_addr" required><label>Repeat email address:</label><input type="email" id="email_addr_repeat" name="email_addr_repeat" required oninput="check(this)"><label>Arrival date:</label><input type="date" id="arrival_dt" name="arrival_dt" required><label>Number of nights (rooms are $99.00 per night):</label><input type="number" id="nights" name="nights" value="1" min="1" max="30" required><label>Number of guests (each additional guest adds $10.00 per night):</label><input type="number" id="guests" name="guests" value="1" min="1" max="4" required><label>Estimated total:</label>$<output id="total" name="total">99</output>.00<br><br><label>Promo code:</label><input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}" title="Promo codes consist of 6 alphanumeric characters."><input type="submit" value="Request Reservation" /> </form><script> function check(input) {if (input.value != document.getElementById('email_addr').value) {input.setCustomValidity('The two email addresses must match.');} else {// input is valid -- reset the error messageinput.setCustomValidity('');} } </script>

表單代碼所帶的 CSS 如下：

:invalid { border-color: #e88;-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);box-shadow:0 0 5px rgba(255, 0, 0, .8); }:required {border-color: #88a;-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);box-shadow: 0 0 5px rgba(0, 0, 255, .5); }form {width:300px;margin: 20px auto; }input {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;border:1px solid #ccc;font-size:20px;width:300px;min-height:30px;display:block;margin-bottom:15px;margin-top:5px;outline: none;-webkit-border-radius:5px;border-radius:5px; }input[type=submit] {background:none;padding:10px; }

參考資料

• W3C 規(guī)范
• HTML5 表單的當(dāng)前情況

特別聲明，本文轉(zhuǎn)載來(lái)源于Html5Rocks。如需轉(zhuǎn)載，請(qǐng)注明來(lái)源：http://www.html5rocks.com/zh/tutorials/forms/html5forms/

總結(jié)

以上是生活随笔為你收集整理的HTML5表单美化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。