HTML表单(用户注册页面制作)

最新推荐文章于 2024-04-07 09:44:00 发布

小—杨

最新推荐文章于 2024-04-07 09:44:00 发布

阅读量560

点赞数 2

文章标签： html 前端 html5

本文链接：https://blog.csdn.net/qq_63538423/article/details/136354371

版权

本次实验的目标是制作一个学生信息注册表单，在表单中输入学生相关的一系列信息，并使用CSS设置表单样式。通过本任务的实现，掌握表单的创建和样式设置方法，能轻松制作网页中类似的表单。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/public.css">
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<h1>学生信息注册</h1>
		<div class="message">
			<h5>请注意：带有*的项必须填写</h5>
			<form class="room" action="#" method="get">
				<table>
					<tr>
						<td class="right">昵称：*</td>
						<td><input type="text" name="nickname" pattern="^\w{6,18}$">（6~18个字符，由字母、数字或下划线构成）</td>
					</tr>

					<tr>
						<td class="right">手机：*</td>
						<!-- 11位的手机号码 -->
						<td><input type="text" name="phone" pattern="^\d{11}$"></td>
					</tr>

					<tr>
						<td class="right">姓名：</td>
						<td><input type="text" name="username" pattern="^[\u4e00-\u9fa5]{0,}$">（要填真实姓名，只能输入汉字）</td>
					</tr>
					<tr>
						<td class="right">性别：</td>
						<td>
							<input type="radio" value="0" name="sex" checked>男
							<input type="radio" value="1" name="sex">女
						</td>
					</tr>
					<tr>
						<td class="right">年龄：</td>
						<td><input type="text" name="age" pattern="^[18-100]*$">(年龄介于18~100岁)</td>
					</tr>

					<tr>
						<td class="right">出生日期：</td>
						<td><input class="sex" type="date" name="bir" > </td>
					</tr>

					<tr>
						<td class="right">电子邮箱：</td>
						<td><input type="email" name="email" placeholder="susan@126.com" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></td>
					</tr>

					<tr>
						<td class="right">身份证号：*</td>
						<td><input type="text"></td>
					</tr>
					<tr>
						<td class="right">籍贯：</td>
						<td >
							<select name="dress" id="#" >
								<option value="0" >重庆市</option>
								<option value="1">北京市</option>
								<option value="2">上海市</option>
								<option value="3">深圳市</option>
								<option value="4">成都市</option>
							</select>
						</td>
					</tr>

					<tr>
						<td class="right">爱好：</td>
						<td >
							<input type="checkbox" name="music">音乐
							<input type="checkbox" name="inter">上网
							<input type="checkbox" value="movi">看电影
							<input type="checkbox" value="chess">下棋
						</td>
					</tr>

					<tr>
						<td class="right">喜欢的颜色：</td>
						<td><input type="color" name="color">（请选择你喜欢的颜色）</td>
					</tr>
					<tr>
						<td colspan="2" class="button-td"><input class="btl" name="btLogin" type="submit" value="提交">
							<input class="bgr" name="btReg" type="reset" value="重置">
						</td>
					</tr>

				</table>
		</div>
	</body>
</html>

//public.css

*{
	margin: 0;
	padding:0;
}
body{
	background-image: url(../img/bg.png);
	background-size: 100%;
	font-family: '黑体';	
}	
.room{
	width: 100%;
}	
select{
	width: 165.22px;
	height: 22.33px;
}
.sex{
	width: 161.22px;
	height: 19.33px;
}
td{
	font-size: 14px;
	line-height: 40px;
}
	
input,select{
	
		/* 设置边框 */
		border: 1px solid blue;
		/* 设置圆角 */
		border-radius: 5px;
	/* 调整 */
	margin:0px 10px;
}

//style.css

	
div{
	border-top: 2px solid #ccc;
}
h1{
	text-align: center;
	margin:10px 0 ;
}
h5{
	color: red;
	margin:10px 0 ;
}
.message{
	font-size: 24px;
	width: 800px;
	height: 600px;
	margin: 0 auto;
}
.right{
	text-align: right;
}
.btl, .bgr {
    width: auto; /* 让按钮自行调整宽度 */
    padding: 5px 10px; /* 调整按钮的内边距以控制间距 */
	margin-left:160px ;
    color: #fff;
    background-color: blue;
    border: none; /* 如果需要，去除边框 */
    cursor: pointer;
}

小—杨

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML表单(用户注册页面制作)

HTML表单(用户注册页面制作)
复制链接

扫一扫

HTML表单(用户注册页面制作)

“相关推荐”对你有帮助么？