今天我們一起來看看如何創(chuàng)建一個實用并且功能強大的表單，表單使用如今最熱門的技術(shù)HTML5和css3來創(chuàng)建，并且可以通過HTML5進行客戶端驗證。
查看預(yù)覽
第一步：策劃表單功能
首先，我們得為我們的表單策劃一下該有什么功能，用什么形式表現(xiàn)。在這個示例中，我們就制作一個比較簡單的留言表單。需要的功能如下：
名稱
電子郵件
網(wǎng)站地址
提交按鈕
我們都希望用戶能夠填寫正確的信息再提交，要實現(xiàn)這一點，我們可以使用HTML5客戶端驗證新技術(shù)。那怎么樣使用這個功能呢?在這里簡單的使用服務(wù)器驗證，不做進一步的深入了解。
第二步：策劃表單形式
在我心中，憧憬著一個美麗而簡約的提交表單。雖然現(xiàn)在很丑，但是他不是野雞是鳳凰。
就像上圖顯示的，包含下面幾個部分：
表格標(biāo)題(Required fields)
表格標(biāo)簽
表格輸入(Placeholder text)
表單提示
提交按鈕
現(xiàn)在我們已經(jīng)確定好了表單的形式，就開始創(chuàng)建HTML結(jié)構(gòu)代碼。
第三步：創(chuàng)建HTML結(jié)構(gòu)代碼
根據(jù)上面確定的形式來創(chuàng)建最基本的HTML代碼。
在這里頁面還是空白的。這只是一個網(wǎng)頁最基本的代碼。
第四步：HTML表單
開始在頁面中創(chuàng)建表單。
第五步：HTML表單元素
為了更好的理解和維持表單的形式，我們將一步一步的添加表單里面的元素。
那最先開始的是創(chuàng)建表單表頭和第一個輸入框：
聯(lián)系我們
* 表示必填項
姓名:
表單提示
根據(jù)我們的策劃圖來看，我們要給表單的“電子郵件”、“網(wǎng)站”增加提示語，所以我們要在input下面增加提示語區(qū)域，再將他們統(tǒng)一樣式處理。
電子郵件: 正確格式為：javin@example.com
其余的表單輸入元素
繼續(xù)添加其他的表單輸入元素。
網(wǎng)站: 正確格式為：
留言:
提交
第六步：添加占位符屬性
作為HTML5的改進之一的網(wǎng)頁表單可以設(shè)置placeholder占位符屬性。占位符字段會在輸入?yún)^(qū)域為空時或者不處于焦點時顯示的，在以前我們只能用javascript來實現(xiàn)。增加占位符字段可以引導(dǎo)用戶正確的輸入信息。
提示技巧：placeholder文本風(fēng)格定義：
這里給大家一個小技巧，如果你想改變占位符的默認(rèn)風(fēng)格，可以通過下面的代碼方式修改(注意瀏覽器的前綴)：
:-moz-placeholder { color: blue; } ::-webkit-input-placeholder { color: blue; }
在現(xiàn)代的瀏覽器中一般都支持placeholder，除了IE9。如果你需要他在所有的瀏覽器中都支持的話，可以考慮用javascript解決方案。
第七步：定義基本的CSS
接下來定義下基本的CSS樣式。
1、格式化 :focus 的樣式
Webkit內(nèi)核瀏覽器會自動給添加一些焦點樣式，我們要自定義風(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、列表樣式
因為我們的表單結(jié)構(gòu)是用列表，所以定義列表來美化。
.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; }
此外，我們增加了頂部和底部的邊框線，使用:first-child和:last-child選擇符來實現(xiàn)。這樣子就增加了我們表單的美觀，但是古老的瀏覽器不支持這兩個選擇符，不過這不是重點，我們要向前看，只要最流行的現(xiàn)代瀏覽器支持就行。
.contact_form li:first-child, .contact_form li:last-child { border-bottom:1px solid #777; }
4、表頭樣式
現(xiàn)在來定義我們的表頭風(fēng)格，有兩部分，一個是標(biāo)題標(biāo)題，另一個是通知的星號(*)表示必填字段。
.contact_form h2 { margin:0; display: inline; } .required_notification { color:#d45252; margin:5px 0 0 0; display:inline; float:right; }
5、表單輸入樣式
表單的輸入元素是表單的核心，用來收集信息。
.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)在再加入一些額外的美化樣式，其中會使用到CSS3，在現(xiàn)代瀏覽器中視覺效果會更加。
.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)鼠標(biāo)點中輸入框時，增加輸入框的長度。
.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */ padding-right:70px; }
在支持transition的瀏覽器中，增加CSS緩慢過渡效果。
.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屬性
我們一直期待的東西，終于要來了，就是HTML5表單處理工具。在HTML5中添加required到input/textarea后，會告訴瀏覽器在提交表單前，表單值必須是存在的;因此，如果沒有填入字段，表單將不會被提交?，F(xiàn)在我們在需要驗證的輸入框里面加上required。
第十步：定義required字段樣式
這里定義輸入框輸入文本后的樣式，我們將星號(*)作為背景圖放置到每個必填項，因此我們得先填充右側(cè)的空間，防止文字重疊到紅色的星號圖像。
.contact_form input, .contact_form textarea { padding-right:30px; }
使用css的偽類選擇符:required來增加紅色的星號圖像。
input:required, textarea:required { background: #fff url(images/red_asterisk.png) no-repeat 98% center; }
表單提交后會發(fā)生什么呢?
現(xiàn)在的表單提交后，如果表單是不正確的填寫信息或者空白，那么將會出現(xiàn)不同的顯示效果，這是因為不同的瀏覽器之間，提示用戶的彈出框的視覺效果是不一樣的，希望在以后的某一天能夠真正的全部標(biāo)準(zhǔn)化。
你可以查看quirksmode來檢查你的瀏覽器是否支持required。
提示技巧：
實際上你可以修改一些瀏覽器的彈出框的風(fēng)格：
::-webkit-validation-bubble-message { padding: 1em; }
第十一步：理解HTML5新的type屬性和客戶端驗證
HTML5的驗證都是根據(jù)表單內(nèi)的type屬性來工作的，在過去的幾年，HTML只支持一小部分的type屬性，例如：type="text"，HTML5出現(xiàn)后增加了幾個type新的屬性，其中就包含email和url，這些都將會被使用到我們的表單當(dāng)中。
通過結(jié)合輸入type屬性和新的required屬性，瀏覽器現(xiàn)在可以實現(xiàn)驗證表單數(shù)據(jù)的客戶端。如果瀏覽器不支持新的type屬性，例如：type="email"，那么他會被默認(rèn)成為type="text"，這點是非常值得我們興奮的，實質(zhì)上，這是一種倒退兼容性的表現(xiàn)，在地球上的所有瀏覽器都可以與之兼容。
那么，如果瀏覽器不支持新的type屬性，對于移動設(shè)備上的瀏覽器來說是沒什么明顯區(qū)別的(除非定義了css規(guī)則)，type="email"屬性將會和type="text"看起來是相同的，然后只有當(dāng)涉及到用戶界面時，對于移動瀏覽器是有差別的。
一個例子：iPhone
蘋果公司的iPhone手機檢測表單類型和動態(tài)的改變屏幕上的鍵盤時會提供上下文聯(lián)想的字符。例如，所有的電子郵件地址，需要字符：“ @ ”和“ . ”， 那iPhone會在確認(rèn)輸入類型為電子郵件時，會自動提供這些字符。
第十二步：更改type屬性
我們在本例中到現(xiàn)在為止，設(shè)置的表單字段都默認(rèn)為type="text"，現(xiàn)在我們需要改變“電子郵箱”和“網(wǎng)站”這兩個為：type="email"type="url"。
第十三步：HTML5驗證
正如在前面所說到的，HTML5在默認(rèn)情況下是通過type來驗證的。這個驗證功能是默認(rèn)激活狀態(tài)的，如果你要關(guān)閉這個功能可以用novalidate屬性來實現(xiàn)：
Name字段
先來看看第一個字段，是“姓名”，要求填寫的是名稱。首先，先定義顯示為錯誤(無效)時的樣式，當(dāng)鼠標(biā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 }
如果，用戶填寫的信息是正確的，那我們就定義這時的樣式為綠色的邊框和綠色的陰影以及顯示一個“正確”打勾的小圖標(biāo)，這時候，不管鼠標(biāo)是否在焦點上，都要保持正確的狀態(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字段
因為我們設(shè)置了type和required的屬性，所以我們的css樣式和驗證規(guī)則已經(jīng)被運用到瀏覽器，會自動根據(jù)特有的規(guī)則自行驗證。
第十四步：介紹HTML5的pattern屬性
用type="email"屬性來舉例說明，在大部分瀏覽器中驗證的字段為@(任意字符 + “@” 符號 + 任意字符)。這顯示是有限的，靠它阻止用戶輸入空格或信息是不能完美解決的。另一個type="url"屬 性，在大多數(shù)瀏覽器中的驗證字段的最低限度為“任意字符加一個冒號”。假如，你輸入的是“H：”，然后進行驗證，這將會通過驗證，但很明顯這不是一個網(wǎng) 址，所以我們希望可以更加詳細(xì)具體的驗證用戶所輸入的信息，那我們應(yīng)該在HTML5中怎么解決使用服務(wù)器驗證來實現(xiàn)上述說到的問題呢?
pattern屬性
這個pattern屬性可以接受一個Javascript的正則表達(dá)式，我們可以通過一個正則表達(dá)式來驗證字段，最后看看我們的HTML代碼：
現(xiàn)在我們的“網(wǎng)站”字段將只會接受http://或者h(yuǎn)ttps://開頭的字符了。這個正則表達(dá)式模式有時候的確讓人難以捉摸，但如果你有時間去學(xué)習(xí)它，那么你們將會開闊另一片天地。
第十五步：表單字段的提示語的樣式
現(xiàn)在我們來定義下表單提示語，他們會在用戶使用表單時根據(jù)表單驗證規(guī)則的正確與否按照特定的提示語顯示出來，最終指引用戶正確提交表單。
.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; }
因為在默認(rèn)表單下，提示語是不會出現(xiàn)的，所以我們先設(shè)置為display:none，然后根據(jù)表單填寫信息的正確與否來顯示不同風(fēng)格的提示語。
使用::before選擇符
現(xiàn)在，為了美化提示語的提示框，我們需要一個小的三角形，來指引用戶。小三角形可以用圖片來顯示，但在這里我們用css來編寫顯示，因為這個三角形在頁面中不是一個很重要的功能，只是一個視覺形式。我們可以使用unicode幾何圖像，再結(jié)合::before選擇符來實現(xiàn)最終效果。
在通常情況下，我們在網(wǎng)頁中會使用unicode格式編碼來顯示特殊圖形(如上圖所示)。因為我們要使用css::before選擇符，所以在content:""規(guī)則里面，我們必須要使用三角形所對應(yīng)的unicode轉(zhuǎn)義編碼。然后我們通過定位，將它顯示在我們希望顯示的地方。
.form_hint::before { content: "\25C0"; /* left point triangle in escaped unicode */ color:#d45252; position: absolute; top:1px; left:-6px; }
使用相鄰選擇符
最后，我們使用相鄰選擇符來顯示或者隱藏表單的提示語。相鄰選擇符(x + y)選擇的是緊貼在x元素之后的y元素。根據(jù)表單字段驗證后的結(jié)果來顯示提示語，然后在使用相鄰選擇符來顯示和隱藏。
.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è)置了隨著判斷一個字段是否正確來顯示不同的風(fēng)格樣式的提示語。
第十六步：坐下來慢慢的欣賞你美麗的HTML5表單
查看預(yù)覽
結(jié)論
正如你所看到的，HTML5表單的特點就是簡潔漂亮，而且具有倒退兼容性，如果運用到你的網(wǎng)站中，它不會破壞你的任何東西。HTML5的驗證功能也 越來越接近客戶端的驗證，可以很有效的幫助用戶填寫正確的表單。然而，HTML5的驗證仍然更換不了服務(wù)器端驗證。就目前為止，這是最好的處理方法，非常 感謝你的閱讀。
原文地址：覺唯前端
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
