教程：让你的表单升级到css3和html5客户端验证

《教程：让你的表单升级到css3和html5客户端验证》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、器验证，不做进一步的深入了解。　　第二步：策划表单形式　　在我心中，憧憬着一个美丽而简约的提交表单。虽然现在很丑，但是他不是野鸡是凤凰。　　 　　就像上图显示的，包含下面几个部分：　　表格标题(Requiredfields)　　表格标签　　表格输入(Placeholdertext)　　表单提示　　提交按钮　　现在我们已经确定好了表单的形式，就开始创建HTML结构代码。　　第三步：创建HTML结构代码　　根据上面确定的形式来创建最基本的HTML代码。　　在这里页面还是空白的。这只是一个网页最基本的代码。　　第四步：HTML表单　　开始在页面中创

3、建表单。　　第五步：HTML表单元素　　为了更好的理解和维持表单的形式，我们将一步一步的添加表单里面的元素。　　那最先开始的是创建表单表头和第一个输入框：　　联系我们　　*表示必填项　　姓名:　　 　　表单提示　　根据我们的策划图来看，我们要给表单的“电子邮件”、“网站”增加提示语，所以我们要在input下面增加提示语区域，再将他们统一样式处理。　　电子邮件:正确格式为：javin@example.com　　 　　其余的表单输入元素　　继续添加其他的表单输入元素。　　网站:正确格式为：http://www.jiawin.com　　留言:　　提

4、交　　 　　第六步：添加占位符属性　　作为HTML5的改进之一的网页表单可以设置placeholder占位符属性。占位符字段会在输入区域为空时或者不处于焦点时显示的，在以前我们只能用javascript来实现。增加占位符字段可以引导用户正确的输入信息。　　提示技巧：placeholder文本风格定义：　　这里给大家一个小技巧，如果你想改变占位符的默认风格，可以通过下面的代码方式修改(注意浏览器的前缀)：　　:-moz-placeholder{color:blue;}::-webkit-input-placeholder{color:blue;

5、}　　在现代的浏览器中一般都支持placeholder，除了IE9。如果你需要他在所有的浏览器中都支持的话，可以考虑用javascript解决方案。　　第七步：定义基本的CSS　　接下来定义下基本的CSS样式。　　1、格式化:focus的样式　　Webkit内核浏览器会自动给添加一些焦点样式，我们要自定义风格，所以需要把它给去掉默认值。　　*:focus{outline:none;}　　 　　2、字体排版样式　　添加字体以及字体大小样式。　　body{font:14px/21px"LucidaSans","LucidaGrande","Luc

6、idaSansUnicode",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:outs

7、ide;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-chi

8、ld{border-bottom:1pxsolid#777;}　　 　　4、表头样式　　现在来定义我们的表头风格，有两部分，一个是标题标题，另一个是通知的星号(*)