對於包含敏感資訊或需要身份驗證才能存取的網頁，密碼保護是一項重要的安全措施。如果您想在不使用伺服器端語言的情況下為網頁新增額外的安全性，則可以使用 HTML、CSS 和 JavaScript 來密碼保護頁面。
本文將向您展示如何建立一個簡單的表單，要求使用者輸入密碼以查看受保護頁面的內容。讓我們看看以下範例，以便更好地了解使用密碼保護頁面。
在下面的範例中，我們正在執行腳本並保護網頁；如果使用者嘗試造訪該網頁，則會提示他們輸入密碼。
<!DOCTYPE html>
<html>
<body>
<script>
var password = "tutorial";
(function passcodeprotect() {
var passcode = prompt("Enter PassCode");
while (passcode !== password) {
alert("Incorrect PassCode");
return passcodeprotect();
}
}());
alert('Welcome To The TP..!');
</script>
</body>
</html>執行腳本時，它將產生一個輸出，顯示一條要求輸入密碼的警報。當使用者符合密碼（「教學」）時，會顯示一則訊息；否則，網頁上會顯示錯誤的密碼。
考慮以下範例，我們為輸入的密碼建立一個輸入字段，以保護網頁以及點擊按鈕。
<!DOCTYPE HTML>
<html>
<body>
<center>
<input type="password" placeholder="passcode" id="tutorial">
<button onclick="protectpasscode()">CHECK</button>
<script>
function protectpasscode() {
const result = document.getElementById("tutorial").value;
let passcode = 12345;
let space = '';
if (result == space) {
alert("Type passcode")
} else {
if (result == passcode) {
document.write("<center><h1>TP, The Best E-Learning </h1></center>");
} else {
alert("Incorrect Passcode");
location.reload();
}
}
}
</script>
</center>
</body>
</html>執行上述腳本時，將彈出輸出窗口，顯示用於輸入密碼的輸入欄位以及網頁上的點擊按鈕。如果使用者符合密碼（12345），它將開啟由文字組成的表單；否則，將顯示錯誤的密碼。
執行下面的範例，我們在其中執行腳本以保護網頁在執行腳本後不顯示其內容。
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
Enter Password:
<input type='text' value='' id='input'><br><br>
<input type='checkbox' onclick='protectpasscode()'>Show results
<p id='tutorial' style='display:none; color: black;'>Mahendra Singh Dhoni, also known as MS Dhoni, is an Indian former international
cricketer who was captain of the Indian national cricket team in limited-overs formats
from 2007 to 2017 and in Test cricket from 2008 to 2014. </p>
<script>
function protectpasscode() {
var a = document.getElementById('input');
var b = document.getElementById('tutorial');
if (a.value === '54') {
b.style.display = 'block';
} else {
b.style.display = 'none';
}
}
</script>
</body>
</html>執行腳本時，它將產生一個輸出，顯示用於輸入密碼的輸入欄位和網頁上的切換複選框。當使用者匹配密碼（54）並切換複選框時，就會顯示網頁內的內容。
以上是如何僅使用 HTML、CSS 和 JavaScript 來密碼保護頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
