萬盛學電腦網 >> 電腦基本常識 >> 讓你的表單升級到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表單元素
為了更好的理解和維持表單的形式，我們將一步一步的添加表單裡面的元素。
那最先開始的是創建表單表頭和第一個輸入框：
