今天我們一起來(lái)看看如何創(chuàng)建一個(gè)實(shí)用并且功能強(qiáng)大的表單，表單使用如今最熱門(mén)的技術(shù)HTML5和css3來(lái)創(chuàng)建，并且可以通過(guò)HTML5進(jìn)行客戶端驗(yàn)證。
查看預(yù)覽
第一步：策劃表單功能
首先，我們得為我們的表單策劃一下該有什么功能，用什么形式表現(xiàn)。在這個(gè)示例中，我們就制作一個(gè)比較簡(jiǎn)單的留言表單。需要的功能如下：
名稱
電子郵件
網(wǎng)站地址
提交按鈕
我們都希望用戶能夠填寫(xiě)正確的信息再提交，要實(shí)現(xiàn)這一點(diǎn)，我們可以使用HTML5客戶端驗(yàn)證新技術(shù)。那怎么樣使用這個(gè)功能呢?在這里簡(jiǎn)單的使用服務(wù)器驗(yàn)證，不做進(jìn)一步的深入了解。
第二步：策劃表單形式
在我心中，憧憬著一個(gè)美麗而簡(jiǎn)約的提交表單。雖然現(xiàn)在很丑，但是他不是野雞是鳳凰。
就像上圖顯示的，包含下面幾個(gè)部分：
表格標(biāo)題(Required fields)
表格標(biāo)簽
表格輸入(Placeholder text)
表單提示
提交按鈕
現(xiàn)在我們已經(jīng)確定好了表單的形式，就開(kāi)始創(chuàng)建HTML結(jié)構(gòu)代碼。
第三步：創(chuàng)建HTML結(jié)構(gòu)代碼
根據(jù)上面確定的形式來(lái)創(chuàng)建最基本的HTML代碼。
在這里頁(yè)面還是空白的。這只是一個(gè)網(wǎng)頁(yè)最基本的代碼。
第四步：HTML表單
開(kāi)始在頁(yè)面中創(chuàng)建表單。
第五步：HTML表單元素
為了更好的理解和維持表單的形式，我們將一步一步的添加表單里面的元素。
那最先開(kāi)始的是創(chuàng)建表單表頭和第一個(gè)輸入框：
聯(lián)系我們
* 表示必填項(xiàng)
姓名:
表單提示
根據(jù)我們的策劃圖來(lái)看，我們要給表單的“電子郵件”、“網(wǎng)站”增加提示語(yǔ)，所以我們要在input下面增加提示語(yǔ)區(qū)域，再將他們統(tǒng)一樣式處理。
電子郵件: 正確格式為：javin@example.com
其余的表單輸入元素
繼續(xù)添加其他的表單輸入元素。
網(wǎng)站: 正確格式為：
留言:
提交
第六步：添加占位符屬性
作為HTML5的改進(jìn)之一的網(wǎng)頁(yè)表單可以設(shè)置placeholder占位符屬性。占位符字段會(huì)在輸入?yún)^(qū)域?yàn)榭諘r(shí)或者不處于焦點(diǎn)時(shí)顯示的，在以前我們只能用javascript來(lái)實(shí)現(xiàn)。增加占位符字段可以引導(dǎo)用戶正確的輸入信息。
提示技巧：placeholder文本風(fēng)格定義：
這里給大家一個(gè)小技巧，如果你想改變占位符的默認(rèn)風(fēng)格，可以通過(guò)下面的代碼方式修改(注意瀏覽器的前綴)：
:-moz-placeholder { color: blue; } ::-webkit-input-placeholder { color: blue; }
在現(xiàn)代的瀏覽器中一般都支持placeholder，除了IE9。如果你需要他在所有的瀏覽器中都支持的話，可以考慮用javascript解決方案。
第七步：定義基本的CSS
接下來(lái)定義下基本的CSS樣式。
1、格式化 :focus 的樣式
Webkit內(nèi)核瀏覽器會(huì)自動(dòng)給添加一些焦點(diǎn)樣式，我們要自定義風(fēng)格，所以需要把它給去掉默認(rèn)值。
*:focus {outline: none;}
2、字體排版樣式
添加字體以及字體大小樣式。
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;} .contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;} .form_hint, .required_notification {font-size: 11px;}
3、列表樣式
因?yàn)槲覀兊谋韱谓Y(jié)構(gòu)是用列表，所以定義列表來(lái)美化。
.contact_form ul { width:750px; list-style-type:none; list-style-position:outside; margin:0px; padding:0px; } .contact_form li{ padding:12px; border-bottom:1px solid #eee; position:relative; }
此外，我們?cè)黾恿隧敳亢偷撞康倪吙蚓€，使用:first-child和:last-child選擇符來(lái)實(shí)現(xiàn)。這樣子就增加了我們表單的美觀，但是古老的瀏覽器不支持這兩個(gè)選擇符，不過(guò)這不是重點(diǎn)，我們要向前看，只要最流行的現(xiàn)代瀏覽器支持就行。
.contact_form li:first-child, .contact_form li:last-child { border-bottom:1px solid #777; }
4、表頭樣式
現(xiàn)在來(lái)定義我們的表頭風(fēng)格，有兩部分，一個(gè)是標(biāo)題標(biāo)題，另一個(gè)是通知的星號(hào)(*)表示必填字段。
.contact_form h2 { margin:0; display: inline; } .required_notification { color:#d45252; margin:5px 0 0 0; display:inline; float:right; }
5、表單輸入樣式
表單的輸入元素是表單的核心，用來(lái)收集信息。
.contact_form label { width:150px; margin-top: 3px; display:inline-block; float:left; padding:3px; } .contact_form input { height:20px; width:220px; padding:5px 8px; } .contact_form textarea {padding:8px; width:300px;} .contact_form button {margin-left:156px;}
現(xiàn)在再加入一些額外的美化樣式，其中會(huì)使用到CSS3，在現(xiàn)代瀏覽器中視覺(jué)效果會(huì)更加。
.contact_form input, .contact_form textarea { border:1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius:2px; } .contact_form input:focus, .contact_form textarea:focus { background: #fff; border:1px solid #555; box-shadow: 0 0 3px #aaa; } /* Button Style */ button.submit { background-color: #68b12f; background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e)); background: -webkit-linear-gradient(top, #68b12f, #50911e); background: -moz-linear-gradient(top, #68b12f, #50911e); background: -ms-linear-gradient(top, #68b12f, #50911e); background: -o-linear-gradient(top, #68b12f, #50911e); background: linear-gradient(top, #68b12f, #50911e); border: 1px solid #509111; border-bottom: 1px solid #5b992b; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; box-shadow: inset 0 1px 0 0 #9fd574; -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ; -moz-box-shadow: 0 1px 0 0 #9fd574 inset; -ms-box-shadow: 0 1px 0 0 #9fd574 inset; -o-box-shadow: 0 1px 0 0 #9fd574 inset; color: white; font-weight: bold; padding: 6px 20px; text-align: center; text-shadow: 0 -1px 0 #396715; } button.submit:hover { opacity:.85; cursor: pointer; } button.submit:active { border: 1px solid #20911e; box-shadow: 0 0 10px 5px #356b0b inset; -webkit-box-shadow:0 0 10px 5px #356b0b inset ; -moz-box-shadow: 0 0 10px 5px #356b0b inset; -ms-box-shadow: 0 0 10px 5px #356b0b inset; -o-box-shadow: 0 0 10px 5px #356b0b inset; }
第八步：添加CSS3互動(dòng)
我們一起來(lái)添加一下互動(dòng)效果，當(dāng)鼠標(biāo)點(diǎn)中輸入框時(shí)，增加輸入框的長(zhǎng)度。
.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */ padding-right:70px; }
在支持transition的瀏覽器中，增加CSS緩慢過(guò)渡效果。
.contact_form input, .contact_form textarea { /* add this to the already existing style */ -moz-transition: padding .25s; -webkit-transition: padding .25s; -o-transition: padding .25s; transition: padding .25s; }
第九步：增加HTML5 required屬性
我們一直期待的東西，終于要來(lái)了，就是HTML5表單處理工具。在HTML5中添加required到input/textarea后，會(huì)告訴瀏覽器在提交表單前，表單值必須是存在的;因此，如果沒(méi)有填入字段，表單將不會(huì)被提交。現(xiàn)在我們?cè)谛枰?yàn)證的輸入框里面加上required。
第十步：定義required字段樣式
這里定義輸入框輸入文本后的樣式，我們將星號(hào)(*)作為背景圖放置到每個(gè)必填項(xiàng)，因此我們得先填充右側(cè)的空間，防止文字重疊到紅色的星號(hào)圖像。
.contact_form input, .contact_form textarea { padding-right:30px; }
使用css的偽類選擇符:required來(lái)增加紅色的星號(hào)圖像。
input:required, textarea:required { background: #fff url(images/red_asterisk.png) no-repeat 98% center; }
表單提交后會(huì)發(fā)生什么呢?
現(xiàn)在的表單提交后，如果表單是不正確的填寫(xiě)信息或者空白，那么將會(huì)出現(xiàn)不同的顯示效果，這是因?yàn)椴煌臑g覽器之間，提示用戶的彈出框的視覺(jué)效果是不一樣的，希望在以后的某一天能夠真正的全部標(biāo)準(zhǔn)化。
你可以查看quirksmode來(lái)檢查你的瀏覽器是否支持required。
提示技巧：
實(shí)際上你可以修改一些瀏覽器的彈出框的風(fēng)格：
::-webkit-validation-bubble-message { padding: 1em; }
第十一步：理解HTML5新的type屬性和客戶端驗(yàn)證
HTML5的驗(yàn)證都是根據(jù)表單內(nèi)的type屬性來(lái)工作的，在過(guò)去的幾年，HTML只支持一小部分的type屬性，例如：type="text"，HTML5出現(xiàn)后增加了幾個(gè)type新的屬性，其中就包含email和url，這些都將會(huì)被使用到我們的表單當(dāng)中。
通過(guò)結(jié)合輸入type屬性和新的required屬性，瀏覽器現(xiàn)在可以實(shí)現(xiàn)驗(yàn)證表單數(shù)據(jù)的客戶端。如果瀏覽器不支持新的type屬性，例如：type="email"，那么他會(huì)被默認(rèn)成為type="text"，這點(diǎn)是非常值得我們興奮的，實(shí)質(zhì)上，這是一種倒退兼容性的表現(xiàn)，在地球上的所有瀏覽器都可以與之兼容。
那么，如果瀏覽器不支持新的type屬性，對(duì)于移動(dòng)設(shè)備上的瀏覽器來(lái)說(shuō)是沒(méi)什么明顯區(qū)別的(除非定義了css規(guī)則)，type="email"屬性將會(huì)和type="text"看起來(lái)是相同的，然后只有當(dāng)涉及到用戶界面時(shí)，對(duì)于移動(dòng)瀏覽器是有差別的。
一個(gè)例子：iPhone
蘋(píng)果公司的iPhone手機(jī)檢測(cè)表單類型和動(dòng)態(tài)的改變屏幕上的鍵盤(pán)時(shí)會(huì)提供上下文聯(lián)想的字符。例如，所有的電子郵件地址，需要字符：“ @ ”和“ . ”， 那iPhone會(huì)在確認(rèn)輸入類型為電子郵件時(shí)，會(huì)自動(dòng)提供這些字符。
第十二步：更改type屬性
我們?cè)诒纠械浆F(xiàn)在為止，設(shè)置的表單字段都默認(rèn)為type="text"，現(xiàn)在我們需要改變“電子郵箱”和“網(wǎng)站”這兩個(gè)為：type="email"type="url"。
第十三步：HTML5驗(yàn)證
正如在前面所說(shuō)到的，HTML5在默認(rèn)情況下是通過(guò)type來(lái)驗(yàn)證的。這個(gè)驗(yàn)證功能是默認(rèn)激活狀態(tài)的，如果你要關(guān)閉這個(gè)功能可以用novalidate屬性來(lái)實(shí)現(xiàn)：
Name字段
先來(lái)看看第一個(gè)字段，是“姓名”，要求填寫(xiě)的是名稱。首先，先定義顯示為錯(cuò)誤(無(wú)效)時(shí)的樣式，當(dāng)鼠標(biāo)在焦點(diǎn)上的時(shí)候，我們就添加一個(gè)紅色的邊框和紅色的陰影。最后也顯示一個(gè)“無(wú)效”的感嘆號(hào)小圖標(biāo)。
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */ background: #fff url(images/invalid.png) no-repeat 98% center; box-shadow: 0 0 5px #d45252; border-color: #b03535 }
如果，用戶填寫(xiě)的信息是正確的，那我們就定義這時(shí)的樣式為綠色的邊框和綠色的陰影以及顯示一個(gè)“正確”打勾的小圖標(biāo)，這時(shí)候，不管鼠標(biāo)是否在焦點(diǎn)上，都要保持正確的狀態(tài)。
.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */ background: #fff url(images/valid.png) no-repeat 98% center; box-shadow: 0 0 5px #5cd053; border-color: #28921f; }
Email字段和URL字段
因?yàn)槲覀冊(cè)O(shè)置了type和required的屬性，所以我們的css樣式和驗(yàn)證規(guī)則已經(jīng)被運(yùn)用到瀏覽器，會(huì)自動(dòng)根據(jù)特有的規(guī)則自行驗(yàn)證。
第十四步：介紹HTML5的pattern屬性
用type="email"屬性來(lái)舉例說(shuō)明，在大部分瀏覽器中驗(yàn)證的字段為@(任意字符 + “@” 符號(hào) + 任意字符)。這顯示是有限的，靠它阻止用戶輸入空格或信息是不能完美解決的。另一個(gè)type="url"屬 性，在大多數(shù)瀏覽器中的驗(yàn)證字段的最低限度為“任意字符加一個(gè)冒號(hào)”。假如，你輸入的是“H：”，然后進(jìn)行驗(yàn)證，這將會(huì)通過(guò)驗(yàn)證，但很明顯這不是一個(gè)網(wǎng) 址，所以我們希望可以更加詳細(xì)具體的驗(yàn)證用戶所輸入的信息，那我們應(yīng)該在HTML5中怎么解決使用服務(wù)器驗(yàn)證來(lái)實(shí)現(xiàn)上述說(shuō)到的問(wèn)題呢?
pattern屬性
這個(gè)pattern屬性可以接受一個(gè)Javascript的正則表達(dá)式，我們可以通過(guò)一個(gè)正則表達(dá)式來(lái)驗(yàn)證字段，最后看看我們的HTML代碼：
現(xiàn)在我們的“網(wǎng)站”字段將只會(huì)接受http://或者h(yuǎn)ttps://開(kāi)頭的字符了。這個(gè)正則表達(dá)式模式有時(shí)候的確讓人難以捉摸，但如果你有時(shí)間去學(xué)習(xí)它，那么你們將會(huì)開(kāi)闊另一片天地。
第十五步：表單字段的提示語(yǔ)的樣式
現(xiàn)在我們來(lái)定義下表單提示語(yǔ)，他們會(huì)在用戶使用表單時(shí)根據(jù)表單驗(yàn)證規(guī)則的正確與否按照特定的提示語(yǔ)顯示出來(lái)，最終指引用戶正確提交表單。
.form_hint { background: #d45252; border-radius: 3px 3px 3px 3px; color: white; margin-left:8px; padding: 1px 6px; z-index: 999; /* hints stay above all other elements */ position: absolute; /* allows proper formatting if hint is two lines */ display: none; }
因?yàn)樵谀J(rèn)表單下，提示語(yǔ)是不會(huì)出現(xiàn)的，所以我們先設(shè)置為display:none，然后根據(jù)表單填寫(xiě)信息的正確與否來(lái)顯示不同風(fēng)格的提示語(yǔ)。
使用::before選擇符
現(xiàn)在，為了美化提示語(yǔ)的提示框，我們需要一個(gè)小的三角形，來(lái)指引用戶。小三角形可以用圖片來(lái)顯示，但在這里我們用css來(lái)編寫(xiě)顯示，因?yàn)檫@個(gè)三角形在頁(yè)面中不是一個(gè)很重要的功能，只是一個(gè)視覺(jué)形式。我們可以使用unicode幾何圖像，再結(jié)合::before選擇符來(lái)實(shí)現(xiàn)最終效果。
在通常情況下，我們?cè)诰W(wǎng)頁(yè)中會(huì)使用unicode格式編碼來(lái)顯示特殊圖形(如上圖所示)。因?yàn)槲覀円褂胏ss::before選擇符，所以在content:""規(guī)則里面，我們必須要使用三角形所對(duì)應(yīng)的unicode轉(zhuǎn)義編碼。然后我們通過(guò)定位，將它顯示在我們希望顯示的地方。
.form_hint::before { content: "\25C0"; /* left point triangle in escaped unicode */ color:#d45252; position: absolute; top:1px; left:-6px; }
使用相鄰選擇符
最后，我們使用相鄰選擇符來(lái)顯示或者隱藏表單的提示語(yǔ)。相鄰選擇符(x + y)選擇的是緊貼在x元素之后的y元素。根據(jù)表單字段驗(yàn)證后的結(jié)果來(lái)顯示提示語(yǔ)，然后在使用相鄰選擇符來(lái)顯示和隱藏。
.contact_form input:focus + .form_hint {display: inline;} .contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */ .contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */
正如你從css中看到的，我們還設(shè)置了隨著判斷一個(gè)字段是否正確來(lái)顯示不同的風(fēng)格樣式的提示語(yǔ)。
第十六步：坐下來(lái)慢慢的欣賞你美麗的HTML5表單
查看預(yù)覽
結(jié)論
正如你所看到的，HTML5表單的特點(diǎn)就是簡(jiǎn)潔漂亮，而且具有倒退兼容性，如果運(yùn)用到你的網(wǎng)站中，它不會(huì)破壞你的任何東西。HTML5的驗(yàn)證功能也 越來(lái)越接近客戶端的驗(yàn)證，可以很有效的幫助用戶填寫(xiě)正確的表單。然而，HTML5的驗(yàn)證仍然更換不了服務(wù)器端驗(yàn)證。就目前為止，這是最好的處理方法，非常 感謝你的閱讀。
原文地址：覺(jué)唯前端
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
