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

最新推荐文章于 2022-06-28 07:36:51 发布

Julie115

最新推荐文章于 2022-06-28 07:36:51 发布

阅读量670

点赞数

本文链接：https://blog.csdn.net/Julie115/article/details/81808274

版权

本文通过制作用户注册、登录、反馈和搜索页面，深入学习HTML表单元素。总结了表单的组成、各元素用法，如<form>、<input>、<select>、<label>等，并探讨了浏览器兼容性问题，如Firefox中input的line-height问题及IE中按钮对齐方式等。

摘要由CSDN通过智能技术生成

一、注册页代码：

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

最低0.47元/天解锁文章

Julie115

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
通过简单的用户注册，登录，搜索，反馈页的制作学习表单元素

一、注册页代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;用户注册页&lt;/title&gt;&lt;style&gt;*{ margin:0px; padding:0px; font:normal 12px/1.5em &
复制链接

扫一扫