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 请填写密码/
=密码2的标签重复密码：/标签
输入id=密码2 请重复密码/
电子邮件标签邮箱地址：/标签
输入id=电子邮件 www.csdn.com /
/字段集
字段集id=个人
神话；传奇其他信息/图例
=网站的标签个人网址：/标签
输入id=网站http://www.example.com /
年龄标签年龄：/标签
输入id=年龄[0-9]{1,3} 占位符=填写年龄
=薪金的标签月薪：/标签
输入id=salary [0-9]{2，} placeholder=月薪几多value=10000 onchange=显示值(this。值)/
span id=rangevalue 10000 /span
脚本
函数showValue(值){
文档。getelementbyid(范围值).innerHTML=值
/脚本
=描述的标签描述：/标签
textarea id=description name=description cols=30 rows=5 placeholder=这里是详细描述/textarea
/字段集
字段集id=确认
输入类型=提交值=提交 /
分区/分区
/字段集
/表单
/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
文本区域{
调整大小：两者；
max-230 px；
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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。