HTML5表单美化
[轉(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ì)使用后備的文字輸入。
| 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)址。 |
| 用于輸入單個(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é)
- 上一篇: python强度公式计算_python
- 下一篇: html原生控件美化,HTML表单美化