今天我們一起來(lái)看看如何創(chuàng)建一個(gè)實(shí)用并且功能強(qiáng)大的表單，表單使用如今最熱門(mén)的技術(shù)HTML5和css3來(lái)創(chuàng)建，并且可以通過(guò)HTML5進(jìn)行客戶端驗(yàn)證。
第一步：策劃表單功能
首先，我們得為我們的表單策劃一下該有什么功能，用什么形式表現(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代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Contact Form</title>
<link rel="stylesheet" media="screen" href="styles.css" rel="external nofollow" >
</head>
<body>
</body>
</html>
在這里頁(yè)面還是空白的。這只是一個(gè)網(wǎng)頁(yè)最基本的代碼。
第四步：HTML表單
開(kāi)始在頁(yè)面中創(chuàng)建表單。
<form class="contact_form" action="" method="post">
</form>
第五步：HTML表單元素
為了更好的理解和維持表單的形式，我們將一步一步的添加表單里面的元素。
那最先開(kāi)始的是創(chuàng)建表單表頭和第一個(gè)輸入框：
<ul>
<li>
<h2>聯(lián)系我們</h2>
<span class="required_notification">* 表示必填項(xiàng)</span>
</li>
<li>
<label for="name">姓名:</label>
<input />
</li>
</ul>
表單提示
根據(jù)我們的策劃圖來(lái)看，我們要給表單的“電子郵件”、“網(wǎng)站”增加提示語(yǔ)，所以我們要在input下面增加提示語(yǔ)區(qū)域，再將他們統(tǒng)一樣式處理。
<li>
<label for="email">電子郵件:</label>
<input />
<span class="form_hint">正確格式為：javin@example.com</span>
</li>
其余的表單輸入元素
繼續(xù)添加其他的表單輸入元素。
<li>
<label for="website">網(wǎng)站:</label>
<input />
<span class="form_hint">正確格式為：http://www.jiawin.com</span>
</li>
<li>
<label for="message">留言:</label>
<textarea cols="40" rows="6" ></textarea>
</li>
<li>
<button class="submit">提交</button>
</li>
第六步：添加占位符屬性
作為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)用戶正確的輸入信息。
<input placeholder="Javin" />
<input placeholder="javin@example.com" />
<input placeholder="http://www.jiawin.com/" />
提示技巧：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。
<input required />
<input required />
<input required />
<textarea cols="40" rows="6" required ></textarea>
第十步：定義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"。
<input placeholder="javin@example.com" required />
<input placeholder="http://www.jiawin.com/" required/>
第十三步：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)：
<form novalidate>
<-- do not validate this form -->
<input />
</form>
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代碼：
<input placeholder="http://johndoe.com" required pattern="(http|https)://.+" />
現(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表單
