สอนทำหน้าเว็บให้ผู้ใช้ใสรหัสผ่านแล้วให้วิ่งไปหน้าที่ต้องการด้วย HTML JavaScript

byMayCtth2 -กุมภาพันธ์ 28, 2566

1

สวัสดีครับทุกคนในบทความนี้ผมจะมาแจกโค้ดสำหรับให้ผู้ใช้กรองรหัสโค้ดของเรา โดยเราจะเป็นคนกำหนดรหัสเอง และจะให้ผู้ใช้กรองรหัสโค้ดที่ได้จากเรา และเมื่อผู้ใช้กรองรหัสถูกต้องจะต้องให้ขึ้นว่า “รหัสถูกต้อง" และเมื่อผู้ใช้กรองรหัสผิดให้ขึ้นว่า “ใส่รหัสผิด"

เรามาเริ่มกันเลย โค้ดนี้เป็นภาษา HTML CSS JavaScript นะครับ

ตัวอย่าง

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<style>
		body {
			font-family: "Segoe UI", sans-serif;
			background-color: #f8f8f8;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			position: relative;
		}
		
		h1 {
			margin-top: 0;
			font-size: 1.2rem;
			font-weight: bold;
			color: #000;
		}
		
		form {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			border-radius: 20px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			padding: 40px;
		}
		
		label {
			font-size: 1.2rem;
			font-weight: bold;
			color: #000;
			margin-bottom: 10px;
		}
		
		input[type=password] {
			font-size: 1.2rem;
			padding: 10px;
			border: none;
			border-radius: 5px;
			box-shadow: 0 5px 9px rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
			width: 100%;
		}
		
		button[type=submit] {
			background-color: #ff004f;
			color: #fff;
			font-size: 1.2rem;
			font-weight: bold;
			border: none;
			border-radius: 5px;
			padding: 10px 20px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}
		
		button[type=submit]:hover {
			background-color: hotpink;
		}
		img {
		  width: 100px;
		  height: auto;
		  font-size: 15px;
		}
		.sidebar {
		  position: absolute;
		  margin-left: 70%;
		  margin-top: 210%;
		} 
		.sidebar .icon {
		  font-size: 5%;
		  border-radius: 10px;
		  margin: 5px;
		} 
		.sidebar .icon a {
		  text-decoration: none;
		  color: black;
		  font-size: 12px;
		}
</style>

<body>
	<h1>ใส่รหัสผ่านให้ถูกต้อง</h1>
	<img src="https://drive.google.com/uc?export=view&id=1BZ5opctWiU3RzMcUAq5JItUCRyrFsTPE" alt="logo">
	<form action="/check-password" method="post">
		<label for="password">รหัสผ่าน:</label>
		<input type="password" id="password" name="password"><br><br>
		<button type="submit">ยืนยัน</button>
	</form>
	
	<div class="sidebar">
	  <div class="icon">
	    <a href="https://kunsota.blogspot.com/2023/02/html-javascript.html">
	      <img src="https://drive.google.com/uc?export=view&id=1BR7cqHWilNqgOHyZDcNjHdUXQ2qhER7U" alt="download">
	      <p>Download code </p>
	    </a>
	  </div>
	  <div class="icon">
	    <a href="https://tipme.in.th/0a088c612508839d07546707">
	      <img src="https://drive.google.com/uc?export=view&id=1BZ5opctWiU3RzMcUAq5JItUCRyrFsTPE" alt="โดเนท">
	      <p>โดเนทค่าขนมผม</p>
	    </a>
	  </div>
	</div>

	<script>
		// รับข้อมูลจากฟอร์มเมื่อผู้ใช้กดปุ่ม "ตรวจสอบ"
		document.querySelector("form").addEventListener("submit", function(event) {
			event.preventDefault(); // หยุดการส่งฟอร์มแบบปกติ
			const passwordInput = document.querySelector("#password"); // ดึงข้อมูลจากInput password 
			if (passwordInput.value === "CODES") { // ตรวจสอบว่ารหัสผ่านถูกต้องหรือไม่และกำหนดว่าจะให้ผู้ใช้ใส่รหัสผ่านอะไร
				alert("รหัสผ่านถูกต้องครับ"); // แสดงข้อความว่ารหัสผ่านถูกต้อง
				window.location.href = "URL"; // เมื่อผู้ใช้ใส่รหัสผ่านถูกต้องให้ป้อน URL ไปหน้าที่ต้องการ
			} else {
				alert("รหัสผ่านไม่ถูกต้องครับ"); // แสดงข้อความว่ารหัสผ่านไม่ถูกต้อง
			}
		});
	</script>
</body>

</html>