編碼的世界 / 優質文選 / 生涯

HTML+CSS+JS編寫一個較為美觀的簡單登錄注冊網頁

2022年5月04日
-   

前輩們請跳過


在校大學生 學習web一個月做出來的。 CSS訂制兩個網頁的樣式和簡單的小動畫 Js實現注冊登錄的正確錯誤，值得一提的是，我這裏設置了用戶名為1234，密碼為1234才可以登錄跳轉。沒有加後端。注冊的格式大家就自行查看。 HTML定義網頁基本框架 經檢驗火狐、Microsoft Edge都可以實現 登錄頁面： 登錄頁面代碼：
// An highlighted block
<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>登錄頁面</title>





		<link rel="stylesheet" href="2.css">
		<script>
			function $(id){
				return document.getElementById(id);
			}
			function confirm(){
				var username1 = $("username1").value;
				var password1 = $("password1").value;
				if(username1.length == 0){
					$("username1").focus();
					alert("請輸入用戶名!");
					return false;
				}
				if(username1 != "1234"){
					$("username1").focus();
					alert("用戶名或密碼錯誤！");
					return false;
				}
				if(password1.length == 0){
					$("password1").focus();
					alert("請輸入密碼");
					return false;
				}
				if(password1 != "1234"){
					$("password1").focus();
					alert("用戶名或密碼錯誤！")
					return false;
				}
				alert("登陸成功！");
			}
		</script>
	</head>
	<body>
		<form class="box" action="index.html" onsubmit="return confirm()" method="post">
			<h1>登錄</h1>
			<input id="username1" type="text" name="" placeholder="用戶名">
			<input id="password1" type="password" name="" placeholder="密碼">
			<input type="submit" name="" value="登錄">
			<p class="meassage">還未注冊？<a href="注冊頁面.html"> 注冊</a>
			</p>
			<div class="checkbox">
				<label>
					<input type="checkbox" ><span id="checkbox1" class="checkboxmessage" style="font-size: 12px;">記住密碼</span>
				</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<label>
					<input type="checkbox" ><span id="checkbox2" class="checkboxmessage" style="font-size: 12px;">自動登錄</span>
			</div>
		</form>
	</body>
</html>

注冊頁面代碼：

<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>注冊頁面</title>
		<link rel="stylesheet" href="2.css">
		<script>
			function $(id){
				return document.getElementById(id);
			}
			function test(){
				var test1 = $("test1").value;
				var test2 = $("test2").value;
				var test3 = $("test3").value;
				var test4 = $("test4").value;
				if(test1.length == 0){
					$("span1").innerHTML = "用戶名不能為空";
					$("test1").focus();
					return false;
				}else{
					$("span1").innerHTML = "✔";
				}
				if(test1.length > 0 && test1.length < 4){
					$("span1").innerHTML = "用戶名長度至少4個字符";
					$("test1").focus();
					return false;
				}else{
					$("span1").innerHTML = "✔";
				}
				if(test1.length > 16){
					$("span1").innerHTML = "用戶名不能超過16個字符";
					$("test1").focus()
					return false;
				}else{
					$("span1").innerHTML = "✔";
				}
				if(test2.length == 0){
					$("span2").innerHTML = "密碼不能為空";
					$("test2").focus();
					return false;
				}else{
					$("span2").innerHTML = "✔";
				}
				if(test2.length > 0 && test2.length < 4){
					$("span2").innerHTML = "密碼長度至少為4個字符";
					$("test2").focus();
					return false;
				}else{
					$("span2").innerHTML = "✔";
				}
				if(test2.length > 16){
					$("span2").innerHTML = "密碼長度不能超過16個字符";
					$("test2").focus();
					return false;
				}
				if(test2 != test3){
					$("span3").innerHTML = "兩次輸入密碼不一致";
					$("test3").focus();
					return false;
				}else{
					$("span3").innerHTML = "✔";
				}
				if(test4.length == 0){
					$("span4").innerHTML = "郵箱不能為空！";
					$("test4").focus();
					return false;
				}else{
					$("span4").innerHTML = "✔";
				}
				alert("注冊成功！");
			}
				
		</script>
	</head>
	<body>
		<form id="form" name="form" class="box" onsubmit="return test()" action="登錄頁面.html" method="post">
			
			<h1>注冊頁面</h1>
			<input id="test1" type="text" name="" placeholder="用戶名" >
			<span id="span1" type="t1" class="tips">*用戶名為4-16長度字符</span>
			<input id="test2" type="password" name="" placeholder="密碼">
			<span id="span2" type="t2" class="tips">*密碼為4-16字符</span>
			<input id="test3" type="password" name="" placeholder="確認密碼">
			<span id="span3" type="t2" class="tips">*應與密碼一致</span>
			<input id="test4" type="email" name="" placeholder="電子郵箱">
			<span id="span4" type="t3" class="tips">*郵箱不能為空</span>
			<input type="idcard" name="" placeholder="身份證">
			<span type="t4" class="tips"></span>
			<input type="phone" name="" placeholder="手機號">
			<input type="submit" name="" value="注冊">
			<p class="meassage">已經注冊完了？<a href="登錄頁面.html">登錄</a>
			</p>
		</form>
		</body>
	</html>

css代碼:
body{
 margin: 0;
 padding: 0;
 font-family: sans-serif;
 background: #34495e;
}
.box{
 width: 300px;
 padding: 40px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 background: #191919;
 text-align: center;
}
.box h1{
 color: white;
 text-transform: uppercase;
 font-weight: 500;
}
.box input[type = "text"],.box input[type = "password"]{
 border:0;
 background: none;
 display: block;
 margin: 20px auto;
 text-align: center;
 border: 2px solid #3498db;
 padding: 14px 10px;
 width: 200px;





 outline: none;
 color: white;
 border-radius: 24px;
 transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
 width: 280px;
 border-color: #2ecc71;
}
.box input[type = "text"],.box input[type = "email"]{
 border:0;
 background: none;
 display: block;
 margin: 20px auto;
 text-align: center;
 border: 2px solid #3498db;
 padding: 14px 10px;
 width: 200px;
 outline: none;
 color: white;
 border-radius: 24px;
 transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "email"]:focus{
 width: 280px;
 border-color: #2ecc71;
}
.box input[type = "submit"]{
 border:0;
 background: none;
 display: block;
 margin: 20px auto;
 text-align: center;
 border: 2px solid #2ecc71;
 padding: 14px 40px;
 outline: none;
 color: white;
 border-radius: 24px;
 transition: 0.25s;
 cursor: pointer;
}
.box input[type = "submit"]:hover{
 background: #2ecc71;
}
	
.box .meassage{
	text-transform: uppercase;
	color:white;
}
.box input[type = "text"]:focus,.box input[type = "idcard"]:focus{
 width: 280px;
 border-color: #2ecc71;
}
.box input[type = "text"],.box input[type = "idcard"]{
 border:0;
 background: none;
 display: block;
 margin: 20px auto;
 text-align: center;
 border: 2px solid #3498db;
 padding: 14px 10px;
 width: 200px;
 outline: none;
 color: white;
 border-radius: 24px;
 transition: 0.25s;
}.box input[type = "text"]:focus,.box input[type = "phone"]:focus{
 width: 280px;
 border-color: #2ecc71;
}
.box input[type = "text"],.box input[type = "phone"]{
 border:0;
 background: none;
 display: block;
 margin: 20px auto;
 text-align: center;
 border: 2px solid #3498db;
 padding: 14px 10px;
 width: 200px;
 outline: none;
 color: white;
 border-radius: 24px;
 transition: 0.25s;
}
.checkboxmessage{
	color:white;
	font-size:18px;
}
.tips{
	color:white;
	font-size:12px;
}

熱門文章