[轉載]利用 HTML5 美化表單

對表單感興趣的人并不多，但 HTML5 引入的一些重大改進卻同時方便了創建表單的開發人員和填寫表單的用戶。全新的表單元素、屬性、輸入類型、基于瀏覽器的驗證、CSS3 樣式技術以及 FormData 對象讓創建表單變得更輕松，甚至可能更富有趣味性。

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

瀏覽器支持

在撰寫本文時，所有新的表單和輸入元素以及屬性和類型的支持情況都會因瀏覽器的不同而存在很大差異。甚至在支持特定功能的各個瀏覽器之間，它們的行為也會互不相同。但 HTML5 表單的支持情況變化很快，且仍在不斷改進。在撰寫本文時，這些圖表是我能找到的最新圖表，它們詳細說明了各個瀏覽器對 HTML5 表單的支持情況。

新增內容概述

新元素

HTML5 引入了 5 種有關輸入和表單的新元素。

元素 用途 注釋

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

新輸入類型

HTML5 引入了 13 種新的輸入類型。如果在不支持這些輸入類型的瀏覽器中查看，系統就會使用后備的文字輸入。

輸入類型 用途 注釋

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

新輸入屬性

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

屬性 用途 注釋

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

FormData 對象

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

FormData 提供了一種方法，供您使用 JavaScript 即時創建 HTML 表單，然后使用?XMLHttpRequest.send()提交表單。下面是一個簡單的示例：

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 將其他數據添加到現有表單中。

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);

基于瀏覽器的驗證

實話實說吧，驗證表單數據是一項十分令人厭煩的任務，但無論如何您都要去做?，F在，為了執行客戶端表單驗證，您可能會編寫一些自定義 JavaScript 代碼或使用庫執行某些操作，例如檢查有效輸入或在表單提交前確保必填字段均已填寫。

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

required?屬性

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

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

pattern?屬性

您可以通過?pattern?屬性指定用于驗證輸入字段的正則表達式。此示例表示一個部件號的必填文本輸入字段。在此示例中，我們假設部件號由三個大寫字母和緊隨其后的四個數字組成。使用?required?和?pattern?可確保該字段包含一個值，且這個值符合部件號的正確格式。如果用戶將鼠標懸停在該字段上，系統就會顯示?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."/>

在此示例的基礎上，如果輸入的部件號無效，您也可以將輸入字段的邊框描成紅色。要在值無效的情況下在輸入字段周圍顯示紅色邊框，請添加以下 CSS。

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

formnovalidate?屬性

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

<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?為您提供了處理自定義驗證的強大工具。您可以通過該 API 執行設置自定義錯誤、檢查元素是否有效以及確定元素無效原因等操作。在以下示例中，如果兩個字段中的值不一致，系統就會顯示自定義錯誤。

<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>

綜合使用

以下預訂請求表單示例綜合使用了各種輸入類型、表單驗證以及 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 規范
• HTML5 表單的當前情況

特別聲明，本文轉載來源于Html5Rocks。如需轉載，請注明來源：http://www.html5rocks.com/zh/tutorials/forms/html5forms/

總結

以上是生活随笔為你收集整理的HTML5表单美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。