教程让你的表单升级到CSS3和HTML5客户端验证.doc

教程：让你的表单升级到CSS3和HTML5客户端验证
今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。
查看预览
第一步：策划表单功能
首先，我们得为我们的表单策划一下该有什么功能，用什么形式表现。在这个示例中，我们就制作一个比较简单的留言表单。需要的功能如下：
名称
电子邮件
网站地址
提交按钮
我们都希望用户能够填写正确的信息再提交，要实现这一点，我们可以使用HTML5客户端验证新技术。那怎么样使用这个功能呢?在这里简单的使用服务器验证，不做进一步的深入了解。
第二步：策划表单形式
在我心中，憧憬着一个美丽而简约的提交表单。虽然现在很丑，但是他不是野鸡是凤凰。

就像上图显示的，包含下面几个部分：
表格标题(Requiredfields)
表格标签
表格输入(Placeholdertext)
表单提示
提交按钮
现在我们已经确定好了表单的形式，就开始创建HTML结构代码。
第三步：创建HTML结构代码
根据上面确定的形式来创建最基本的HTML代码。
在这里页面还是空白的。这只是一个网页最基本的代码。
第四步：HTML表单
开始在页面中创建表单。
第五步：HTML表单元素
为了更好的理解和维持表单的形式，我们将一步一步的添加表单里面的元素。
那最先开始的是创建表单表头和第一个输入框：
联系我们
*表示必填项
姓名:

表单提示
根据我们的策划图来看，我们要给表单的“电子邮件”、“网站”增加提示语，所以我们要在input下面增加提示语区域，再将他们统一样式处理。
电子邮件:正确格式为：[e-mail]

其余的表单输入元素
继续添加其他的表单输入元素。
网站:正确格式为：http://www.jiawin.com
留言:
提交

第六步：添加占位符属性
作为HTML5的改进之一的网页表单可以设置placeholder占位符属性。占位符字段会在输入区域为空时或者不处于焦点时显示的，在以前我们只能用javascript来实现。增加占位符字段可以引导用户正确的输入信息。
提示技巧：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"LucidaSans","LucidaGrande","LucidaSansUnicode",sans-serif;}.contact_formh2,.contact_formlabel{font-family:Georgia,Times,"TimesNewRoman",serif;}.form_hint,.required_notification{font-size:11px;}

3、列表样式
因为我们的表单结构是用列表，所以定义列表来美化。
.contact_formul{width:750px;list-style-type:none;list-style-position:outside;margin:0px;padding:0px;}.contact_formli{padding:12px;border-bottom:1pxsolid#eee;position:relative;}
此外，我们增加了顶部和底部的边框线，使用:first-child和:last-child选择符来实现。这样子就增加了我们表单的美观，但是古老的浏览器不支持这两个选择符，不过这不是重点，我们要向前看，只要最流行的现代浏览器支持就行。
.contact_formli:first-child,.contact_formli:last-child{border-bottom:1pxsolid#777;}

4、表头样式
现在来定义我们的表头风格，有两部分，一个是标题标题，另一个是通知的星号(*)表示必填字段。
.contact_formh2{margin:0;display:inline;}.requir