萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 讓你的表單升級到CSS3和HTML5客戶端驗證
讓你的表單升級到CSS3和HTML5客戶端驗證
今天我們一起來看看如何創建一個實用並且功能強大的表單，表單使用如今最熱門的技術HTML5和css3來創建，並且可以通過HTML5進行客戶端驗證。
第一步：策劃表單功能
首先，我們得為我們的表單策劃一下該有什麼功能，用什麼形式表現。在這個示例中，我們就制作一個比較簡單的留言表單。需要的功能如下：
名稱
電子郵件
網站地址
提交按鈕
我們都希望用戶能夠填寫正確的信息再提交，要實現這一點，我們可以使用HTML5客戶端驗證新技術。那怎麼樣使用這個功能呢？在這裡簡單的使用服務器驗證，不做進一步的深入了解。
第二步：策劃表單形式
在我心中，憧憬著一個美麗而簡約的提交表單。雖然現在很丑，但是他不是野雞是鳳凰。
就像上圖顯示的，包含下面幾個部分：
表格標題（Required fields）
表格標簽
表格輸入（Placeholder text）
表單提示
提交按鈕
現在我們已經確定好了表單的形式，就開始創建HTML結構代碼。
第三步：創建HTML結構代碼
根據上面確定的形式來創建最基本的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>
在這裡頁面還是空白的。這只是一個網頁最基本的代碼。
第四步：HTML表單
開始在頁面中創建表單。
<form class="contact_form" action="" method="post">
</form>
第五步：HTML表單元素
為了更好的理解和維持表單的形式，我們將一步一步的添加表單裡面的元素。
那最先開始的是創建表單表頭和第一個輸入框：
<ul>
<li>
<h2>聯系我們</h2>
<span class="required_notification">* 表示必填項</span>
</li>
<li>
<label for="name">姓名:</label>
<input />
</li>
</ul>
表單提示
根據我們的策劃圖來看，我們要給表單的“電子郵件”、“網站”增加提示語，所以我們要在input下面增加提示語區域，再將他們統一樣式處理。
<li>
<label for="email">電子郵件:</label>
<input />
<span class="form_hint">正確格式為：[email protected]</span>
</li>
其余的表單輸入元素
繼續添加其他的表單輸入元素。
<li>
<label for="website">網站:</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的改進之一的網頁表單可以設置placeholder占位符屬性。占位符字段會在輸入區域為空時或者不處於焦點時顯示的，在以前我們只能用javascript來實現。增加占位符字段可以引導用戶正確的輸入信息。
<input placeholder="Javin" />
<input placeholder="[email protected]" />
<input placeholder="http://www.jiawin.com/" />
提示技巧：placeholder文本風格定義：
這裡給大家一個小技巧，如果你想改變占位符的默認風格，可以通過下面的代碼方式修改（注意浏覽器的前綴）：
:-moz-placeholder {
color: blue;
}
::-webkit-input-placeholder {
color: blue;
}
在現代的浏覽器中一般都支持placeholder，除了IE9。如果你需要他在所有的浏覽器中都支持的話，可以考慮用javascript解決方案。
第七步：定義基本的CSS
接下來定義下基本的CSS樣式。
1、格式化 :focus 的樣式
Webkit內核浏覽器會自動給添加一些焦點樣式，我們要自定義風格，所以需要把它給去掉默認值。
*: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、列表樣式
因為我們的表單結構是用列表，所以定義列表來美化。
.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選擇符來實現。這樣子就增加了我們表單的美觀，但是古老的浏覽器不支持這兩個選擇符，不過這不是重點，我們要向前看，只要最流行的現代浏覽器支持就行。
.contact_form li:first-child, .contact_form li:last-child {
border-bottom:1px solid #777;
}
4、表頭樣式
現在來定義我們的表頭風格，有兩部分，一個是標題標題，另一個是通知的星號（*）表示必填字段。
.contact_form h2 {
margin:0;
display: inline;
}
.required_notification {
color:#d45252;
margin:5px 0 0 0;
display:inline;
float:right;
}
- 上一頁:交互設計未來趨勢的8個見解
- 下一頁:“即將上線”頁面的設計原則與創意要素
