html简单登录页面制作

html简单登录页面制作在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1-3</title>
		<style>
		    #bg{
			width:30%;
			height:25%;
			top:30%;
			left:60%;
			position:fixed;
			background-image:url(https://b-ssl.duitang.com/uploads/item/201406/28/20140628134651_sWicV.jpeg);
			background-size:60%;
		     } 
		</style>
		<script type="text/javascript" >
		     function check() {
			 var a=document.getElementById('username').value;
			 var b=document.getElementById('password').value;
			 var c=document.getElementById('Username').value;
			 var d=document.getElementById('Password').value;
			 if(a!=c)
			      alert("name error!");
			 else if(b!=d)
			      alert("password error!");
			 else alert("Welcome!");
		     }
		</script>
	</head>
	<body>
	      <div id="bg">
		   <form>
		      <table width="100%">
			 <tr>
				<td style="text-align:right" height:"100px">
				<p>name:</p></td>
				<td><input type="text" id="username">
				<input type="hidden" id="Username" value="201739160412"></td>
			</tr>
			<tr>
				<td style="text-align:right">
				<p>password:</p></td>
				<td><input type="password" id="password">
				<input type="hidden" id="Password" value="123456789"></td>
			</tr>
			<tr>
				 <td>&nbsp;</td>
				  <td><input type="button" value="loading" onclick='check()'></td>
			</tr>
			</table>
		    </form>
		</div>
	</body>
</html>
	 

参考资料:
https://blog.csdn.net/qq_39458443/article/details/77949159

发布了33 篇原创文章 · 获赞 2 · 访问量 6958

猜你喜欢

转载自blog.csdn.net/qq_42677329/article/details/88918741