HTML应用开发基础篇-简单网页

最新推荐文章于 2023-07-27 11:06:18 发布

来者不是客

最新推荐文章于 2023-07-27 11:06:18 发布

阅读量179

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43305922/article/details/100619599

版权

前端专栏收录该内容

31 篇文章 5 订阅

订阅专栏

大一学的 web 编程，到大三了全给忘了，这个学期开的H5这门课听的是一头雾水，还是没事的时候多看看书，把以前的东西找回来。这里呢是第一节课老师留的练习，确实不难，只不过全给忘了怎么做，做一下笔记好好记着。

内容很简单，做一个登录框的小网页，用户名和密码要有不能为空的提示，账号：HTML，密码：123456，账号或密码错误不允登录。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.row{
				color: black; 
				border:1px solid black;
				margin-top: 5px;
				margin-bottom: 10px;
			}
			#border{
				text-align: center;
				width: 300px;
				height: 200px;
				border: 1px solid black;
				background-color: gainsboro;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<form action="index.html" method="get">
			<div id="border">
				<h2>简单登陆</h2>
			
				用户 <input type="text" id="user" class="row" placeholder="请输入用户名。。。"/>
				<br />
				密码 <input type="password" id="password" class="row" placeholder="请输入密码。。。"/>
				<br />
				<input type="submit" value="登录" onclick="return check()" />
			</div>	
		</form>	
	</body>
	<script type="text/javascript">
		function check(){
			var user=window.document.getElementById("user").value;
			var pas=window.document.getElementById("password").value;
			if(user==""){
				window.alert("用户名不能为空！");
				return false;
			}
			if(pas==""){
				window.alert("密码不能为空！");
				return false;
			}
			if(user!="HTML" && pas!="123456"){
				window.alert("用户名或密码错误，请重新输入！");
				return false;
			}
			else
				return true;
		}
		
	</script>
</html>

效果图如下：