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> </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
![web OS —— goowy.com[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)