html简单的登录界面制作_html登录页面制作代码

作者：2023面试高手 | 2024-06-02 22:12:39

踩

html登录页面制作代码

html简单的登录界面制作

话不多说，老铁们直接拿代码去用吧。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

发现问题不用慌，有老子在！
记得点赞加关注哦。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/664531