当前位置：移动技术网 > IT编程>网页制作>Html5 > html5+css3实现一款注册表单

html5+css3实现一款注册表单

2018年02月12日 | 移动技术网IT编程 | 我要评论

效果图如下：

[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>

<p id=wrapper>
    <p id=lbl></p>
    <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="提交" />
            <p class="clearfix"></p>
        </fieldset>
    </form>
</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

  </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=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>

</body>
</html>

css源码：

[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;
}

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;
}

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

HTNL5拖拽事件

HTML5拖拽事件1. 设置拖拽图片自带拖拽功能其他元素可设置draggable属性<div dragga... [阅读全文]
H5笔记

H5笔记元素sectionnav元素section在html5中，article元素可以看成是特殊类的secti... [阅读全文]
（三）排序算法之选择排序

（三）排序算法之选择排序思路：选择排序之前说的冒泡排序和插入排序套路差不多，都是将数组分隔为已排序和未排序子数组... [阅读全文]
HTML5 -- 教程原版笔记（自用）

来自超哥的2019HTML5+CSS3基础教程。 [阅读全文]
ES6 - 手摸手教你解构后台特定字段的正确姿势

前言：如果你是一名前端开发者，那么请确保下文能够一字不落的看完，因为接下来的问题你曾经100%遇到过、且高达90... [阅读全文]
HTML Canvas 绘制实时动态折线图

本文使用HTML的Canvas元素绘制实时动态折线图。参考于这篇博客HTML5 Canvas动画折线图可动... [阅读全文]
程序员快速成长的心法与方法论

一、心法1、谦逊谦逊是一切的根基，谦逊是自我觉知的能力；谦逊并不是温顺或者毫无抱负，而是放低身段，向一切有益... [阅读全文]
“你必须具有读取权限才能查看此对象属性”解决方法

“你必须具有读取权限才能查看此对象属性”解决方法解决出处引文微软回答步骤1：首先选中一个分区，然后点击右键——属... [阅读全文]
uniapp中使用sqlite模块2——使用SQLite

详情移步官方文档：http://www.html5plus.org/doc/zh_cn/sqlite.htmls... [阅读全文]
web前端基础之HTML5语义化新标签学习笔记（8）学会用语义化标签

阿树有点儿话HI ~你好呀生活也就总是这样呀，一日三餐，每天重复走着同一条路线，做着差不多的事情。也许会有人经历... [阅读全文]

网友评论


验证码：

html5+css3实现一款注册表单

2018年02月12日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论