html5+css3实现一款注册表单实例
2013-04-17 16:12
756 查看
效果图如下:
html源码:
css源码:
html源码:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <div id=wrapper> <div id=lbl></div> <form> <fieldset id=account> <legend>个人信息</legend> <label for=username>账号:</label> <input id=username class=textbox type=text name=username required placeholder="请填写账号" /> <label for=password1>密码:</label> <input id=password1 class=textbox type=password name=password1 required placeholder="请填写密码"/> <label for=password2>重复密码:</label> <input id=password2 class=textbox type=password name=password2 required placeholder="请重复密码"/> <label for=email>邮箱地址:</label> <input id=email class=textbox type=email name=email required placeholder="www.csdn.com" /> </fieldset> <fieldset id=personal> <legend>其他信息</legend> <label for=website>个人网址:</label> <input id=website class=textbox type=url name=website required placeholder="http://www.example.com" /> <label for=age>年龄:</label> <input id=age class=textbox type=number name=age min=18 step=2 pattern="[0-9]{1,3}" placeholder="填写年龄"> <label for=salary>月薪:</label> <input id=salary class=textbox type=range name=salary min=0 max=50000 step=500 pattern="[0-9]{2,}" placeholder="月薪几多" value=10000 onchange="showValue(this.value)" /> <span id=rangevalue>10000</span> <script> function showValue(value) { document.getElementById("rangevalue").innerHTML=value; } </script> <label for=description>描述:</label> <textarea id=description name=description cols=30 rows=5 placeholder="这里是详细描述"></textarea> </fieldset> <fieldset id=confirm> <input type=submit value="提交" /> <div class="clearfix"></div> </fieldset> </form> </div> </body> </html>
css源码:
body{ background:url(bg.jpg) repeat; font-family:Arial Narrow, Arial, sans-serif; margin:0; padding:0; } header, section, footer{ display:block; } header{ width:100%; background-color:rgb(0, 0, 0); background-color:rgba(0, 0, 0, 0.9); color:#ccc; padding:15px 0; letter-spacing:1px; margin-bottom:20px; position:relative; } header h1{ margin:0 50px; text-shadow:2px 2px 2px #888; float:left; } #backlinks{ float:right; margin:-10px 20px; line-height:25px; font-weight:bold; font-size:12px; text-align:right; } #backlinks a{ color:#ccc; text-decoration:none; margin:3px 0 0; display:block; } #backlinks a:hover{ color:#fff; } footer{ background-color:rgb(0, 0, 0); background-color:rgba(0, 0, 0, 0.8); height:25px; width:100%; line-height:25px; position:relative; font-family:Arial,Helvetica,sans-serif; bottom:0; left:0; color:#888; font-size:11px; } footer span{ padding-left:20px; } footer a{ color:#1FA2E1; } #wrapper{ width:770px; margin:0 auto; text-align:center; } #wrapper hgroup{ margin:20px 0; text-shadow:1px 1px 1px #ccc; } #wrapper h1{ color:#146FA0; font-size:42px; margin:0; } #wrapper h2{ color:#71C1ED; font-size:27px; margin:0; } #lbl{ color:#777; font-size:17px; font-weight:bold; text-shadow:1px 1px 0 #fff; margin:10px 0; } *:focus{ outline:none; } label, input, textarea, fieldset{ display:block; } fieldset#account, fieldset#personal{ width:250px; padding:0 50px 50px; margin:10px; float:left; background:rgb(244,244,244); background:rgba(244,244,244,0.7); -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; border:3px double #999; } fieldset#confirm{ padding-top:10px; clear:both; border:none; line-height:15px; margin:10px 0; } fieldset#confirm label, fieldset#confirm input{ display:inline; float:left; margin:15px 5px 0; } legend{ font-size:20px; font-weight:bold; letter-spacing:5px; color:#999; margin-left:-20px; text-align:left; padding:0 10px; text-shadow:1px 1px 0 #ccc; } label{ font-size:17px; font-weight:bold; margin:17px 0 7px; text-align:left; text-shadow:1px 1px 0 #fff; } textarea{ resize:both; max-width:230px; } input.textbox, textarea{ padding:5px 10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border:1px solid #fff; width:200px; text-shadow:1px 1px 1px #777; -moz-box-shadow: 0px 2px 0px #999; -webkit-box-shadow: 0px 2px 0px #999; box-shadow: 0px 2px 0px #999; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background:url(required.png) no-repeat 200px 5px #F0F0EF; background:-webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */ background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */ background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ background:-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ background:-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ } input.textbox:focus, textarea:focus{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); -moz-box-shadow: 5px 3px 1px #ccc; -webkit-box-shadow: 5px 3px 1px #ccc; box-shadow: 7px 7px 2px #ccc; text-shadow:1px 1px 3px #777; } input.textbox:required{ background:url(required.png) no-repeat 200px 5px #F0F0EF; background:url(required.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */ background:url(required.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */ background:url(required.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ background:url(required.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ background:url(required.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ } input.textbox:required:valid{ background:url(valid.png) no-repeat 200px 5px #F0F0EF; background:url(valid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */ background:url(valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */ background:url(valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ background:url(valid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ background:url(valid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ } input.textbox:focus:invalid, input.textbox:not(:required):invalid{ background:url(invalid.png) no-repeat 200px 5px #F0F0EF; background:url(invalid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */ background:url(invalid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */ background:url(invalid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ background:url(invalid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ background:url(invalid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ } input[type=submit] { padding:10px; margin:0 10px !important; width:300px; } @media screen and (-webkit-min-device-pixel-ratio:0) { input[type=range] {padding:0;} } #rangevalue{ display:block; text-align:right; margin-top:-25px; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #aaa; font-style:italic; text-shadow:1px 1px 0 #fff; } input:-moz-placeholder, textarea:-moz-placeholder { color: #aaa; font-style:italic; text-shadow:1px 1px 0 #fff; } .clearfix{ clear:both; }
相关文章推荐
- html5+css3实现一款注册表单
- html5+css3实现一款注册表单
- 超酷HTML 5和CSS3实现登录及注册功能表单
- css3实现一款模仿iphone样式的注册表单
- 一款利用纯css3实现的超炫3D表单的实例教程
- html5 css3实例教程 一款html5和css3实现的小机器人走路动画
- 一款利用纯css3实现的win8加载动画的实例分析
- YII2框架表单-model(验证)-HTML_help部件 URL_help部件 以注册页面为实例
- CSS3/HTML5实现漂亮的分步骤注册登录表单
- 超酷HTML5和CSS3实现的登录及其注册功能表单
- 一款纯css3实现的竖形二级导航的实例教程
- html实现用户注册页面(表单+表格)——html小练习
- css3一款iphone样式的注册表单
- 实例:应用CSS实现表单form布局(博主:http://www.bm777.com/post/32.html)
- Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据实例
- css3实例教程 一款纯css3实现的发光屏幕旋转特效
- PHP PEAR/HTML/QuickForm实现用户注册表单界面
- YII2框架表单-model(验证)-HTML_help部件 URL_help部件 以注册页面为实例