使用HTML5和CSS3美化表单
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
body
margin:0px;
padding:0px;
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;}
*:focus{outline:none;}
::-webkit-input-placeholder{color:blue;}
:-moz-placeholder{color:blue;}
:-o-placeholder{color:blue;}
:ms-placeholder{color:blue;}
/*列表样式*/
.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;
}
.contact_form li:first-child,.contact_form li:last-child{
border-bottom:1px solid #777;
}
/*表头样式*/
.contact_form h2{
margin:0px;
display:inline;
}
.required_notification{
color:#d45252;
margin:5px 0 0 0;
display:inline;
float:right;
}
/*表单输入样式*/
.contact_form label{
width:150px;
margin-top:3px;
display:inline-block;
float:left;
padding:3px;
}
.contact_form input{
height:20px;
width:220px;
padding:5px 8px;
}
.contact_form textarea{
padding:8px;width:300px;
}
.contact_form button{
margin-left:156px;
}
.contact_form input,.contact_form textarea{
border:1px solid #AAA;
box-shadow:0px 0px 3px #CCC,0px 10px 15px #eee inset;
border-radius:5px;
padding-right:30px;
-moz-transition:padding .25s;
-webkit-transition:padding .25s;
-o-transition:padding .25s;
transition:padding .25s;
}
input:required,textarea:required{
background:#fff url(ldent.png) no-repeat 98% center;
}
.contact_form input:focus,.contact_form textarea:focus{
border:1px solid #aaa;
box-shadow:0px 0px 5px #eee;
padding-right:70px;
}
.contact_form input:focus:invalid,.contact_form textarea:focus:invalid{
background:#fff url(must.png) no-repeat 98% center;
border:1px solid #E01F1F;
box-shadow:0px 0px 5px #E01F1F;
}
.contact_form input:required:valid,.contact_form textarea:required:valid{
background:#FFF url(dui.png) no-repeat 98% center;
box-shadow:0 0 5px #5cd053;
border-color:#28921f;
}
/*按钮样式*/
button.submit{
background-color:#68b12f;
background:-webkit-gradient(linear,left top,left bottom,form(#68b12f),to(#50911e));
background:-webkit-linear-gradient(top,#68b12f,#50911e);
background:-moz-linear-gradient(top,#68b12f,#50911e);
background:-ms-linear-gradient(top,#68b12f,#50911e);
background:-o-linear-gradient(top,#68b12f,#50911e);
background:linear-gradient(top,#68b12f,#50911e);
border:1px solid #50911e;
border-bottom:1px solid #5b992b;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
box-shadow:inset 0 1px 0 0 #9fd574;
-webkit-box-boxshaow:0 1px 0 0 #9fd574;
-moz-box-boxshaow:0 1px 0 0 #9fd574;
-ms-box-shadow:0 1px 0 0 #9fd574;
-o-box-shadow:0 1px 0 0 #9fd574;
color:white;
font-weight:bold;
padding:6px 20px;
text-align:center;
text-shadow:0 -1px 0 #396715;
letter-spacing:5px;
text-indent:5px;
}
button.submit:hover{
opacity:.85;
cursor:pointer;
}
button.submit:active{
border:1px solid #20911e;
box-shadow:0px 0px 10px 5px #356b0b inset;
-webkit-box-shadow:0px 0px 10px 5px #356b0b inset;
-moz-box-shadow:0px 0px 10px 5px #356b0b inset;
-ms-box-shadow:0px 0px 10px 5px #356b0b inset;
-o-box-shadow:0px 0px 10px 5px #356b0b inset;
}
.form_hint{
background:#d45252;
border-radius:3px 3px 3px 3px;
color:white;
margin-left:10px;
padding:5px 6px;
z-index:999;
position:absolute;
display:none;
}
.form_hint::before{
content:url(triangle.png);
color:#d45252;
position:absolute;
top:1px;
left:-12px;
}
.contact_form input:focus + .form_hint{display:inline;}
.contact_form input:required:valid + .form_hint{background:#28921f;}
.contact_form input:required:valid + .form_hint::before{color:#28921f;content:url(triangle_1.png)}
</style>
</head>
<body>
<form class="contact_form" action="" method="POST">
<ul>
<li>
<h2>联系我们</h2>
<span class="required_notification">*表示必填项</span>
</li>
<li>
<label for="name">姓名：</label>
<input type="text" id="name" placeholder="javin" required="true"/>
</li>
<li>
<label for="email">邮箱：</label>
<input type="text" id="email" placeholder="[email protected]" pattern="\w+@\w+(.\w{2,3})+" required="true"/>
<span class="form_hint">正确格式为：[email protected]</span>
</li>
<li>
<label for="website">网站：</label>
<input type="url" id="website" placeholder="http://www.baidu.com" title="网址格式错误" required="true" pattern="(http|https)://.+"/>
<span class="form_hint">正确格式为：http://www.baidu.com</span>
</li>
<li>
<label for="message">留言：</label>
<textarea cols="40" rows="6" required="true"></textarea>
</li>
<li><button class="submit">提交</button></li>
</ul>
</form>
</body>
</html>
效果图：
