html用户注册表单制作,HTML注册表单
效果图如下:
超文本标记语言源码:复制代码代码如下:
!声明文档类型
超文本标记语言
头
meta http-equiv= Content-Type Content= text/html;charset=utf-8 /
link rel=样式表 href= CSS/style。CSS /
脚本src= http://Ajax。谷歌API。com/Ajax/libs/jquery/1。7 .1/jquery。量滴js /脚本
/头
身体
部门id=包装器
div id=lbl/div
形式
字段集id=帐户
神话;传奇个人信息/图例
=用户名的标签账号:/标签
输入id=用户名类=文本框类型=文本名称=用户名必填占位符=请填写账号 /
=密码一的标签密码:/标签
输入id=密码1 class=文本框类型=密码名称=密码1必需的占位符=请填写密码/
=密码2的标签重复密码:/标签
输入id=密码2 class=文本框类型=密码名称=密码2必需的占位符=请重复密码/
电子邮件标签邮箱地址:/标签
输入id=email class=textbox type=email name=email required placeholder= www。csdn。com /
/字段集
字段集id=个人
神话;传奇其他信息/图例
=网站的标签个人网址:/标签
输入id=网站类=文本框类型=URL名称=网站所需占位符= http://www。举例。com /
年龄标签年龄:/标签
输入id=age class=textbox type=number name=age min=18 step=2 pattern=[0-9]{ 1,3} placeholder=填写年龄
=薪金的标签月薪:/标签
输入id=salary class=textbox type=range name=salary min=0 max=50000 step=500 pattern=[0-9]{ 2,} placeholder=月薪几多value=10000 onchange=显示值(this。值)/
span id=rangevalue10000/span
脚本
函数showValue(值){
文档。getelementbyid(范围值).innerHTML=值
}
/脚本
=描述的标签描述:/标签
textarea id=description name=description cols=30 rows=5 placeholder=这里是详细描述/textarea
/字段集
字段集id=确认
输入类型=提交值=提交 /
div class=clearfix/div
/字段集
/表单
/div
/body
/html
钢性铸铁源码:复制代码代码如下:
正文{
背景:url(bg.jpg)重复;
字体系列:Arial Narrow、Arial、sans-serif;
边距:0;
填充:0;
}
页眉、节、页脚{
显示:块;
}
标题{
宽度:100%;
背景色:rgb(0,0,0);
背景色:rgba(0,0,0,0.9);
颜色:# ccc
填充:15px 0;
字母间距:1px
边距-底部:20px
位置:相对;
}
标题h1{
边距:0 50像素
文-影:2px 2px 2px # 888
浮动:左;
}
#反向链接{
浮动:对;
边距:-10px 20px;
行高:25px
字体粗细:粗体;
字体大小:12px
文本对齐:右对齐;
}
#反向链接一个{
颜色:# ccc
文字-装饰:无;
保证金:3px 0 0
显示:块;
}
#反向链接答:悬停{
颜色:# fff
}
页脚{
背景色:rgb(0,0,0);
背景色:rgba(0,0,0,0.8);
高度:25px
宽度:100%;
行高:25px
位置:相对;
字体系列:阿里亚,Helvetica,无衬线;
底部:0;
左:0;
颜色:# 888;
字体大小:11px
}
页脚跨度{
左填充:20px
}
页脚一个{
颜色:# 1FA2E1
}
#包装器{
宽度:770像素
边距:0自动;
文本对齐:居中;
}
#包装组{
边距:20px 0;
文-影:1px 1px 1px # ccc
}
#包装h1{
颜色:# 146FA0
字体大小:42px
边距:0;
}
#包装h2{
颜色:# 71C1ED
字体大小:27px
边距:0;
}
#lbl{
颜色:# 777;
字体大小:17px
字体粗细:粗体;
文-影:1px 1px 0 # fff
边距:10px 0;
}
*:焦点{
大纲:无;
}
标签、输入、文本区域、字段集{
显示:块;
}
字段集#帐户,字段集#个人{
宽度:250像素
填充:0 50像素50像素
边距:10px
浮动:左;
背景:rgb(244,244,244);
背景:rgba(244,244,244,0.7);
-WebKit-border-radius:25px;
-moz-border-radius:25px;
边框半径:25px
边框:3px双# 999;
}
字段集#确认{
填充顶部:10px
明确:两者都有;
边框:无;
行高:15px
边距:10px 0;
}
字段集#确认标签,字段集#确认输入{
显示:内嵌;
浮动:左;
边距:15px 5px 0;
}
图例{
字体大小:20px
字体粗细:粗体;
字母间距:5px
颜色:# 999;
左边距:-20px;
文本对齐:左对齐;
填充:0 10px
文-影:1px 1px 0 # ccc
}
标签{
字体大小:17px
字体粗细:粗体;
边距:17px 0 7px
文本对齐:左对齐;
文-影:1px 1px 0 # fff
}
文本区域{
调整大小:两者;
最大宽度:230像素;
}
input.textbox,textarea{
填充:5px 10px
-WebKit-border-radius:15px;
-moz-border-radius:15px;
边框半径:15px
边框:1px固体# fff
宽度:200像素
文-影: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-过渡:全0.5s轻松出;
-moz-过渡:全0.5s缓入缓出;
过渡:全0.5s缓入缓出;
背景:URL(必填。png)不重复200 px 5px # f0f 0ef
背景:-WebKit-渐变(线性,左上,左下,from(#E3E3E3),to(# FFFFFF));/* Saf4,Chrome */
背景:-webkit-linear-gradient(top,#E3E3E3,# FFFFFF);/* Chrome 10,Saf5.1 */
背景:-moz-linear-gradient(top,#E3E3E3,# FFFFFF);/* FF3.6 */
背景-女士-线性-梯度(顶,#E3E3E3,# FFFFFF);/* IE10 */
背景:-哦-线性-渐变(顶,#E3E3E3,# FFFFFF);/* Opera 11.10 */
}
输入.文本框:焦点,文本区域:焦点{
-WebKit-transform:scale(1.1);
-moz-transform:scale(1.1);
变换:缩放(1.1);
-moz-box-shadow:5px 3px 1px # CCC;
-WebKit-box-shadow:5px 3px 1px # CCC;
盒影:7px 7px 2px # ccc
文-影:1px 1px 3px # 777
}
输入.文本框:必选{
背景:URL(必填。png)不重复200 px 5px # f0f 0ef
背景:URL(必填。png)无重复200像素5px,-WebKit-渐变(线性,左上,左下,from(#E3E3E3),to(# FFFFFF));/* Saf4,Chrome */
背景:url(必选。png)无重复200px 5px,-WebKit-线性-渐变(top,#E3E3E3,# FFFFFF);/* Chrome 10,Saf5.1 */
背景:url(必选。png)无重复200px 5px,-moz-线性-渐变(top,#E3E3E3,# FFFFFF);/* FF3.6 */
背景:url(必选。png)无重复200px 5px,-ms-线性-渐变(top,#E3E3E3,# FFFFFF);/* IE10 */
背景:url(必选。png)无重复200px 5px,-o-线性-渐变(top,#E3E3E3,# FFFFFF);/* Opera 11.10 */
}
输入.文本框:必选:有效{
背景:URL(有效。png)不重复200 px 5px # f0f 0ef
背景:URL(有效。png)无重复200像素5px,-WebKit-渐变(线性,左上,左下,from(#E3E3E3),to(# FFFFFF));/* Saf4,Chrome */
背景:URL(有效。png)无重复200 px 5px,-WebKit-线性-渐变(top,#E3E3E3,# FFFFFF);/* Chrome 10,Saf5.1 */
背景:URL(有效。png)无重复200 px 5px,-moz-线性-渐变(top,#E3E3E3,# FFFFFF);/* FF3.6 */
背景:url(valid.png)无重复200像素5px,-毫秒-线性-渐变(顶,#E3E3E3,# FFFFFF);/* IE10 */
背景:url(valid.png)无重复200像素5像素,-o-线性-渐变(顶,#E3E3E3,# FFFFFF);/* Opera 11.10 */
}
输入.文本框:焦点:无效,输入.文本框:非(:必需):无效{
背景:URL(无效。png)不重复200 px 5px # f0f 0ef
背景:URL(无效。png)无重复200像素5px,-WebKit-渐变(线性,左上,左下,from(#E3E3E3),to(# FFFFFF));/* Saf4,Chrome */
背景:URL(无效。png)无重复200 px 5px,-WebKit-线性-渐变(top,#E3E3E3,# FFFFFF);/* Chrome 10,Saf5.1 */
背景:URL(无效。png)无重复200 px 5px,-moz-线性-渐变(top,#E3E3E3,# FFFFFF);/* FF3.6 */
背景:URL(无效。png)无重复200 px 5px,-ms-线性-渐变(top,#E3E3E3,# FFFFFF);/* IE10 */
背景:URL(无效。png)无重复200 px 5px,-o-线性-渐变(top,#E3E3E3,# FFFFFF);/* Opera 11.10 */
}
输入[类型=提交] {
填充:10px
边距:0 10px!重要;
宽度:300像素
}
@媒体屏幕和(-WebKit-min-device-pixel-ratio:0){
输入[type=range]{填充:0;}
}
#范围值{
显示:块;
文本对齐:右对齐;
margin-top:-25px;
}
输入:-webkit-input-placeholder,textarea:-WebKit-input-placeholder {
颜色:# aaa
字体样式:斜体;
文-影:1px 1px 0 # fff
}
输入:-moz-placeholder,textarea:-moz-placeholder {
颜色:# aaa
字体样式:斜体;
文-影:1px 1px 0 # fff
}。清除浮动
明确:两者都有;
}
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。