首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

html5+css3实现一款注册表单实例

Posted in HTML / CSS onApril 17, 2013

效果图如下：
html5+css3实现一款注册表单实例
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实现一款注册表单实例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3实现swap交换动画
Jan 19 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 #HTML / CSS
html5与css3小应用
Apr 03 #HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 #HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 #HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 #HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 #HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 #HTML / CSS
面向接口(1) nacos(1) MyBatis(5) Android Studio(4) seata(1) OpenAI baselines(1) cv2(1) Flask Web(1) exec(1) OpenGL(1)
You might like
php桌面中心(二) 数据库写入
2007/03/11 PHP
php源码加密 仿微盾PHP加密专家(PHPCodeLock）
2010/05/06 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python3实现网页版raspberry pi（树莓派）小车控制
2020/02/12 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
一套VC试题
2015/01/23 面试题
有针对性的求职自荐信
2013/11/14 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
银行学习十八大感想
2014/01/11 职场文书
策划创业计划书
2014/02/06 职场文书
聘任书模板
2014/03/29 职场文书
工会趣味活动方案
2014/08/18 职场文书
工程部主管岗位职责
2015/02/12 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python