这篇文章主要为大家展示了“如何使用html5+css3实现一个注册表单”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用html5+css3实现一个注册表单”这篇文章吧。
复制代码
<！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类=文本框类型=文本名称=用户名必需的占位符=“请填写账号” />
<label for = password1>密码：</ label>
<input id = password1 class = textbox type = password name = password1必需的占位符=“请填写密码” />
<label for = password2>重复密码：</ label>
<input id = password2 class = textbox type = password name = password2必需的占位符=“请重复密码” />
<label for = email>邮箱地址：</ label>
<input id = email class = textbox type = email name =电子邮件必填placeholder =“ www.csdn.com” />
</ fieldset>
<fieldset id = personal>
<legend>其他信息</ legend>
<label for = website>个人网址：</ label>
<input id = website class = textbox type = url name =网站必需的占位符=“ 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>
函数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>
css源码：
复制代码
代码如下：
正文{
background：url（bg.jpg）重复；
字体家族：Arial Narrow，Arial，无衬线；
保证金：0;
填充：0;
}
页眉，节，页脚{
display：block;
}
标头{
width：100％;
background-color：rgb（0，0，0）;
background-color：rgba（0，0，0，0.9）;
颜色：#ccc;
padding：15px 0;
字母间距：1px；
底边距：20px;
位置：相对；
}
标头h2 {
margin：0 50px;
文字阴影：2px 2px 2px＃888;
向左飘浮;
}
#backlinks {
float：right;
边距：-10px 20px;
line-height：25px;
font-weight：bold;
font-size：12px;
text-align：right;
}
#backlinks a {
color：#ccc;
文字修饰：无；
边距：3px 0 0;
显示：块;
}
#backlinks a：hover {
color：#fff;
}
页脚{
background-color：rgb（0，0，0）;
background-color：rgba（0，0，0，0.8）;
高度：25像素；
宽度：100％;
line-height：25px;
位置：相对；
字体家族：Arial，Helvetica，sans-serif；
底部：0;
左：0;
颜色：＃888;
font-size：11px;
}
页脚跨度{
padding-left：20px;
}
页脚a {
color：＃1FA2E1;
}
#wrapper {
width：770px;
margin：0自动;
text-align：center;
}
#wrapper hgroup {
margin：20px 0;
文字阴影：1px 1px 1px #ccc;
}
#wrapper h2 {
color：＃146FA0;
font-size：42px;
保证金：0;
}
#wrapper h3 {
color：＃71C1ED;
font-size：27px;
保证金：0;
}
#lbl {
color：＃777;
font-size：17px;
font-weight：bold;
文字阴影：1px 1px 0 #fff;
边距：10px 0;
}
*：focus {
outline：none;
}
标签，输入，文本区域，字段集{
display：block;
}
fieldset＃account，fieldset＃personal {
width：250px;
填充：0 50px 50px;
边距：10px;
向左飘浮;
背景：rgb（244,244,244）;
背景：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;
清除：两者；
边框：无；
line-height：15px;
边距：10px 0;
}
fieldset＃confirm标签，fieldset＃confirm输入{
display：inline;
向左飘浮;
边距：15px 5px 0;
}
图例{
font-size：20px;
font-weight：bold;
字母间距：5px；
颜色：＃999;
左边距：-20px;
text-align：left;
填充：0 10px;
文字阴影：1px 1px 0 #ccc;
}
标签{
font-size：17px;
font-weight：bold;
边距：17px 0 7px;
text-align：left;
文字阴影：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实心#fff;
宽度：200像素；
文字阴影：1px 1px 1px＃777;
-moz-box-shadow：0px 2px 0px＃999;
-webkit-box-shadow：0px 2px 0px＃999;
框阴影：0px 2px 0px＃999;
-webkit-transition：全部0.5s缓入；
-moz转换：全部0.5s缓入；
过渡：所有0.5s缓入缓出；
background：url（required.png）不重复200px 5px＃F0F0EF;
背景：-webkit-gradient（线性，左上，左下，从（＃E3E3E3），到（#FFFFFF））; / * Saf4 +，Chrome * /
背景：-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /
背景：-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /
背景：-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /
背景：-o-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Opera 11.10+ * /
}
input.textbox：focus，textarea：focus {
-webkit-transform：scale（1.1）;
-moz-transform：scale（1.1）;
转换：scale（1.1）;
-moz-box-shadow：5像素3像素1像素#ccc;
-webkit-box-shadow：5px 3px 1px #ccc;
框阴影：7px 7px 2px #ccc;
文字阴影：1px 1px 3px＃777;
}
input.textbox：required {
background：url（required.png）不重复200px 5px＃F0F0EF;
background：url（required.png）不重复200px 5px，-webkit-gradient（linear，left top，left bottom，from（＃E3E3E3），to（#FFFFFF））; / * Saf4 +，Chrome * /
background：url（required.png）不重复200px 5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /
background：url（required.png）不重复200px 5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /
背景：url（required.png）不重复200px 5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /
background：url（required.png）不重复200px 5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Opera 11.10+ * /
}
input.textbox：required：valid {
background：url（valid.png）不重复200px 5px＃F0F0EF;
background：url（valid.png）不重复200px 5px，-webkit-gradient（linear，左上，左下，从（＃E3E3E3），到（#FFFFFF））; / * Saf4 +，Chrome * /
background：url（valid.png）不重复200px 5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /
background：url（valid.png）不重复200px 5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /
background：url（valid.png）不重复200px 5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /
background：url（valid.png）不重复200px 5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Opera 11.10+ * /
}
input.textbox：focus：invalid，input.textbox：not（：required）：invalid {
background：url（invalid.png）不重复200px 5px＃F0F0EF;
背景：url（invalid.png）不重复200px 5px，-webkit-gradient（linear，左上，左下，从（＃E3E3E3），到（#FFFFFF））; / * Saf4 +，Chrome * /
background：url（invalid.png）不重复200px 5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /
background：url（invalid.png）不重复200px 5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /
background：url（invalid.png）不重复200px 5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /
background：url（invalid.png）不重复200px 5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Opera 11.10+ * /
}
input [type = submit] {
padding：10px;
margin：0 10px！重要;
宽度：300px;
}
@media屏幕和（-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;
字体样式：斜体；
文字阴影：1px 1px 0 #fff;
}
输入：-moz-placeholder，文本区域：-moz-placeholder {
color：#aaa;
字体样式：斜体；
文字阴影：1px 1px 0 #fff;
}
.clearfix {
clear：both;
}
以上是“如何使用html5+css3实现一个注册表单”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
