WEB前端技术开发--登录表与注册表

发疯的熏熏

已于 2023-12-27 10:39:37 修改

阅读量445

点赞数

分类专栏： WEB前端技术文章标签：前端

于 2023-12-27 10:20:17 首次发布

本文链接：https://blog.csdn.net/m0_58837398/article/details/135238685

版权

WEB前端技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、实验目的

掌握表单元素做一个注册页面和登录页面

二、实验内容

1.实验区域

2.功能描述

在这个实验中，可以进行注册，当你注册成功后，会弹出警示框，告诉你注册成功，如果你已经有账号了，直接选择登陆界面，输入正确的形式，就可以弹出来登陆成功。

3.html描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人注册和登录界面</title>
		<link type="text/css" rel="stylesheet" href="css/zhuce.css" />
	</head>
	<body>
		<div class="main">
			<form>
				<fieldset>
					<legend align="center">注册表</legend>
					<h3 align="center">如果你还没有注册账号   赶紧注册吧！</h3>
					<div align="center">
						手&nbsp;&nbsp;机&nbsp;号：<input type="text" id="phone"/>
						<br />
						用&nbsp;&nbsp;户&nbsp;名：<input type="text" id="username" name="username" value="请输入喜欢的用户名"/>
						<br />
						身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份：<select name="card"/>
						<option value="学生">学生</option>
						<option>家长</option>
						<option>老师</option>
						</select>
						<br />
						性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：<input type="radio" name="sex" checked="checked" value="male"/>男<input type="radio" name="sex" value="female" />女
						<br />
						密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="pasw" />
						<br />
						确认密码：<input type="password" id="pasw" />
						<br />
						验&nbsp;&nbsp;证&nbsp;码：<input type="text" id="yanzheng"/>
						<br />
						<input type="button" id="button" name="button" value="注册" onclick="javascript:alert('注册成功！')" />
					</div>
				</fieldset>
				<fieldset>
					<legend align="center">登录表</legend>
					<h4 align="center">如果你已注册，请登录！</h4>
					<div align="center">
						手&nbsp;&nbsp;机&nbsp;号:<input type="text" id="phone"/>
						<br />
						密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="pasw"/>
						<br />
						<input type="button" id="button" value="登录" onclick="javascript:alert('登录成功！')"/>
					</div>
				</fieldset>
			</form>
		</div>
	</body>
</html>

4.css描述

    legend{
	font-size: 35px;
	color: deepskyblue;  
}
#phone{
	border-radius: 5px;
	text-align: center;
}
#pasw{
	border-radius: 5px;
	text-align: center;
}
#username{
	border-radius: 5px;
	text-align: center;
}
#yanzheng{
	border-radius: 5px;
	text-align: center;
}
h4{
	color: red;
}
.main{
	width: 350px;
}
div{
	background-color: azure;
}
#button{
	margin-top: 20px;
	background-color: bisque;
	color: red;
	width: 118x;
	height: 68px;
	font-size: 48px;
	border-radius: 10px;
	border-style: none;
}