您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> 交互设计 >> 正文
让你的表单升级到CSS3和HTML5客户端验证
作者：佚名 责任编辑：admin 更新时间：2022-06-22
今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术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个见解
- 下一个程序编程： “即将上线”页面的设计原则与创意要素
