学生信息登记表

最新推荐文章于 2022-12-15 13:55:51 发布

@CJL

最新推荐文章于 2022-12-15 13:55:51 发布

阅读量1.3k

点赞数

分类专栏：练习

本文链接：https://blog.csdn.net/qq_44109821/article/details/103649939

版权

练习专栏收录该内容

36 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<title>学生信息登记表</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			ul,
			li {
				list-style: none;
			}
			
			header,
			nav,
			main,
			footer {
				width: 400px;
				margin: 5px auto 5px;
				border: 1px solid #555;
				background: #999;
				padding: 10px;
				color: #fff;
				text-align: center;
			}
			
			input {
				width: 200px;
				height: 20px;
			}
			
			#submit {
				width: 60px;
				height: 20px;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>

		<header>
			<h2>学生信息登记表</h2>
		</header>

		<main>
			<form action="" method="post">
				<label for="">学生姓名:</label><input type="text" id="name" /><br />
				<label for="">高考总分:</label><input type="number" id="score" max="750" min="0" /><br />
				<label for="">学生生日:</label><input type="date" id="birthday" /><br />
				<label for="">个人主页:</label><input type="url" id="web" /><br />
				<label for="">电子邮箱:</label><input type="email" id="mail" /><br />
				<label for="">填表日期</label>:<input type="datetime-local" id="data" /><br />
				<input type="submit" id="submit" value="提交" />
			</form>
		</main>
		<footer>版权所有：格莱科技</footer>

	</body>
	<script type="text/javascript">
		window.onload = function() {
			var submit = document.getElementById("submit"); //获取提交按钮
			submit.onclick = function() { //为提交按钮添加点击事件
				var name = document.getElementById("name"); //获取学生姓名
				var score = document.getElementById("score"); //获取高考总分
				var birthday = document.getElementById("birthday"); //获取学生生日
				var web = document.getElementById("web"); //获取个人主页
				var mail = document.getElementById("mail"); //获取电子邮箱
				var data = document.getElementById("data"); //获取填表日期
				if(name.value.length <= 1 || name.value.length >= 7) { //判断明星长度是否为2-6位
					alert("姓名请输入2-6个字符"); //弹出错误提示
					return false; //禁止表单提交

				} else if(birthday.value == '') {
					alert("请填写学生生日");
					return false;
				} else if(web.value == '') {
					alert("请填写个人主页");
					return false;
				} else if(mail.value == '') {
					alert("请填写电子邮箱");
					return false;
				} else if(data.value == '') {
					alert("请填写填表日期");
					return false;
				}
			}
		}
	</script>

</html>

@CJL

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
学生信息登记表

<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>学生信息登记表</title> <style> * { padding: 0; margin: 0; } ul,...
复制链接

扫一扫