通过简单的用户注册，登录，搜索，反馈页的制作学习表单元素

其他 2018-09-19 01:19:47 阅读次数: 0
版权声明：此文为作者所有！ https://blog.csdn.net/Julie115/article/details/81808274

一、注册页代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册页</title>
<style>
*{
	margin:0px;
	padding:0px;
	font:normal 12px/1.5em "宋体",Verdana,Lucida,Arial,Helvetica,sans-serif;
	}
.box{
	border:1px solid #e8e8e8;
	width:600px;
	background-color:#ffffff;
	padding:1px;}
h3{
	text-align:center;
	font-size:24px;
	font-weight:bold;
	background-color:lightgray;
	color:white;
}
fieldset{
	border:none;
	padding:20px;
}
fieldset div{
	margin-top:8px;}
label{
	float:left;
	width:120px;
	heigt:22px;
	text-align:right;
	cursor:pointer;
	color:black;
	margin-right:4x;}
.useName input,.mima input,.mima2 input,.protect select,.answer input{
	width:120px;
	padding:3px 2px 0px;
	border:1px solid gray;}

.sex input{
	vertical-align:-3px;
	margin:0px 6px;
	border:1px solid gray;
	}
textarea{
	width:280px;
	padding:3px 2px 0px;
	border:1px solid gray;
	}
.agree input{
	vertical-align:-3px;
	margin-right:4px;}
a{
	color:#ff3260;
	}
.submit{
text-align:center;}
button{
	height:24px;
	width:50px;
	line-height:24px;
	letter-spacing:3px;
	padding-left:3px;
	cursor:pointer;
	background-color:lightgray;}
</style>
</head>
<body>
<div class="box">
<h3>用户注册</h3>
<form action="" method="post">

<fieldset>

<div class="useName"><label for="useName">用户名：</label><input type="text" id="useName"/></div>
<div class="mima"><label for="mima">密码：</label><input type="password" id="mima"/></div>
<div class="mima2"><label for="mima2">重复密码：</label><input type="password" id="mima2"/></div>
<div class="protect"><label for="protect">密码保护问题：</label><select name="problem" class="sel" id="protect"/><optgroup label="请选择密码提示问题"></optgroup><option>喜欢的英文歌</option><option>最好的朋友</option><option>喜欢的老师</option></select></div>
<div class="answer"><label for="answer">密码保护问题答案：</label><input type="" id="answer"/></div>
<div class="sex"><label for="sex">性别：</label><input type="radio" name="sex" value="男" checked="checked">男<input type="radio" name="sex" value="女">女</div>
<div class="impress"><label for="impress">本站印象:</label><textarea rows="4" cols="40"></textarea></div>
<div class="agree"><label for="agree">同意服务条款：</label><input type="checkbox"/><a href="">查看服务条款？</a></div>
<div class="submit"><button type="submit" >提交</button></div>
</fieldset>
</form>
</div>

</body>
</html>

运行结果：

注册页

二、登录页代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录页</title>
<style>
*{
	margin:0px;
	padding:0px;
	font:normal 12px/1.5em "宋体",Verdana,Lucida,Arial,Helvetical,sans-serif;}
.login{
	border:1px solid #e8e8e8;
	width:210px;
	padding:1px;
	background:#ffffff;}
h3{
	height:24px;
	line-height:24px;
	text-align:center;
	background:-webkit-linear-gradient(white,lightgray);
	background:-o-linear-gradient(white,lightgray);
	background:-moz-linear-gradient(white,lightgray);
	background:linear-gradient(white,lightgray);}
div{
	margin-top:8px;}
label{
	
	width:80px;
	text-align:right;
	color:#ababab;}
.login_cont{
	padding:0px 10px;}
.useName input,.usePsd input{
	width:150px;
	height:17px;
	padding:3px 2px 0;
	border:1px solid #dedede;
	}
.keep{
	padding-left:48px;
}
.keep input{
	vertical-align:-3px;
	*verticla-align:-3px;/*for ie*/
	margin:5px;
}
.btn,.foot{
	text-align:center;
	}
button{
	letter-spacing:3px;
	height:22px;
	margin:3px;
	padding-left:3px;
	cursor:pointer;
	background:-webkit-linear-gradient(white,lightgray);
	background:-o-linear-gradient(white,lightgray);
	background:-moz-linear-gradient(white,lightgray);
	background:linear-gradient(white,lightray);
	border:1px solid #lightgray;}
.foot{
	margin-top:20px;
	margin-bottom:5px;
	}
a{
	color:#ababab;
	text-decoration:none;}
</style>
</head>
<body>
<div class="login">
<form action="demo_frm.php" method="post">
<h3>用户登录</h3>
<div class="login_cont">
<div class="useName"><label for="useName">用户名：</label><br/><input type="text"  id="useName"/></div>
<div class="usePsd"><label for="usePsw">密码：</label><br/><input type="password" id="usePsw"/></div>
</div>
<div class="keep"><input type="checkbox" id="keeplogin"/><label for="keeplogin">下次自动登录</label></div>
<div class="btn"><button type="submit">登录</button></div>
<div class="foot"><p><a href="">忘记密码</a>&nbsp; <a href="">没有账号，快速注册</a></p></div>
</div>
</form>
</div>
</body>
</html>

运行结果：

登录页

三、反馈页代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户反馈表</title>
<style>
.feedback{
width:398px;
padding:1px;
border:1px solid #e8e8e8;
background-color:#ffffff;
}
*{
margin:0px;
padding:0px;
font:normal 12px/1.5em "宋体",Verdana,Lucida,Arial,Helvetica,sans-serif;
}
h3{
height:24px;
line-height:24px;
color:#ffffff;
background-color:#999999;
font-size:13px;
font-weight:bold;
text-indent:12px;
}
.content{
padding:0px 10px;}
fieldset{
padding-left:12px;
margin-top:10px;
border:0 none;
border-top:1px solid #999999;}
legend{
padding:0px 5px;
color:#333333;}
fieldset div{
margin-top:8px;}
label{
float:left;
width:80px;
height:22px;
line-height:24px;
text-align:right;
color:#ababab;
cursor:pointer;}

.base_info input{
padding:3px 2px 0px;
border:1px solid #dedede;
}
.usename input,.tel input,.email input{
width:100px;
height:17px;}
.image input{
width:auto;
height:auto;}
textarea{
width:240px;
height:66px;
padding-left:2px;
border:1px solid #dedede;
}
.tip{
font-size:10px;
padding:5px 0px 0px 80px;
color:#ff3260;}
.btn{
text-align:center;
padding:5px 0px;}
button{
height:22px;
margin:0 5px;
letter-spacing:3px;
padding-left:3px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="feedback">
<div><h3>反馈表单</h3></div>
<div class="content">
<form action="demo_form.php" method="post">
<fieldset class="base_info">
<legend>用户信息</legend>
<div class="usename"><label for="userName">用户名：</label><input type="text" value=“张三” id="userName"/></div>
<div><label for="sex">性别：</label>男<input type="radio" value="男" name="sex"/>女<input type="radio" value="女" name="sex"/>保密<input type="radio" value="保密" name="sex" checked="checked"/></div>
<div class="tel"><label for="tel">电话：</label><input type="tel" id="tel"/></div>
<div class="email"><label for="email">邮箱：</label><input type="email" id="email"/></div>
</fieldset>
<fieldset class="feedback_info">
<legend>反馈信息</legend>
<div><label for="message">留言：</label><textarea rows="4" cols="40" id="message"></textarea ></div>
<div class="image"><label for="image">相关图片：</label><input type="file"/>
<p class="tip">本系统支持上传.jpg、.gif、.png图片！</p> </div>
</fieldset>

<div class="btn"><button type="submit">提交</button><button type="reset">重置</button></div>
</form>
</div>
</body>
</html>

运行结果：

四、搜索页代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>搜索框</title>
<style>
.box{
	position:relative;
	width:360px;
	padding:5px 0;}
*{
	margin:0px;
	padding:0px;
	font:normal 12px/1.5em "宋体",Verdana,Lucida,Arial,Helvetica,sans-serif;
	border-sizing:border-box;}	
ul{
	list-style:none;
	}
h3,h4{
	display:none;
	}
select{
	float:left;
	width:60px;
	height:20px;
	}
input{
	float:left;
	width:196px;
	height:20px;
	padding:1px 2px;
	margin:0 5px;
	border:1px solid #619fcf;
	}
button{
	float:left;
	width:59px;
	cursor:pointer;
	heiht:20px;}
.tips{
	position:absolute;
	top:25px;
	left:65px;
	width:186px;
	padding:5px 5px 0;
	border:1px solid #619fcf;}
li{
	float:left;
	width:174px;
	height:22px;
	line-height:22px;
	}
a{
	float:left;
	text-decoration:none;
	color:#333333;}
a:hover{
	color:#ff0000;
	}
span{
	float:right;
	color:#cccccc;}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h3>搜索框</h3>
<form action="" method="post">
<select>
<option>网页</option>
<option>图片</option>
<option>新闻</option>
<option>MP3</option>
</select>
<input type="search" value="css"/><button type="submit">搜索</button>
</form>
</div>
<div class="tips">
<h4>搜索提示</h4>
<ul>
<li><a href="">css视频</a><span>共有589个项目</span></li>
<li><a href="">css教程</a><span>共有58393个项目</span></li>
<li><a href="">css+div</a><span>共有158393个项目</span></li>
<li><a href="">css网页设计</a><span>共有58393个项目</span></li>
<li><a href="">css样式</a><span>共有158393个项目</span></li>
</ul>
</div>
</div>
</body>
</html>

运行结果：

学习总结：

1、一个完整的表单由表单框架（<form>标签）、表单域（<input><select>等标签）、表单按钮（<input><botton>）以上3部分组成。form常用属性action和method。

2、fieldset为表单域，有默认的边框，legend为表单域里面的标题。

3、label与input（type=text，search，passwrod等）配合使用，label的for与input的id一致时，可以通过点击label里的文字激活input框。value为框内默认显示内容。

4、input的type=radio的时候，表示一组单选按钮，此时要把关联的所有项命名同一个name，表示一个问题的几个选项。checked=checked表示默认选定某一项。

5、select中间一般包含一个optgroup的选项组，每一项用标签option。optgroup标签内有个label属性用来提示归类选项。

一些兼容问题：

1、select输入框的高度和宽度因浏览器不同有差别，一般用auto默认值恢复浏览器默认解析。

2、input标签虽然可以css修改其边框以及背景样式，但FF浏览器还存在一些问题，无法利用css的line-height行高属性设置单行文字垂直居中，因此考虑用padding的方式让其实现垂直居中。

3、浏览器默认解析多选框input（type=checkbox）与文字并列出现时，不会将文字与多选框底部对齐，为了r对齐显示，对多选框设置

.checkbox{
    vertical-align:-3px
    *verticla-align:0;/*for IE*/
}

4、在IE浏览器中，按钮（button）与文字之间的垂直对齐关系如同多选框与文字一样用*verticla-align来调整。

猜你喜欢

转载自blog.csdn.net/Julie115/article/details/81808274
今日推荐
周排行
AIZU 2224 Save your cats(并查集)
HTTP响应头状态码详解
Python socket编程（2）
MaxCompute Studio使用心得系列7—作业对比
Supervisor安装使用
LeetCode 164. Maximum Gap
mysql面试题: 一张表里面有ID自增主键，当insert了17条记录之后，删除了第15,16,17条记录，再把mysql重启，再insert一条记录，这条记录的ID是18还是15
nutch1.2 DeleteDuplicates IndexMerger 详解
OC - @property与setter,getter方法
SpringBoot @Transactional的rollbackFor属性
每日归档
更多
2024-09-19(0)
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022