对于包含敏感信息或需要身份验证才能访问的网页，密码保护是一项重要的安全措施。如果您想在不使用服务器端语言的情况下为网页添加额外的安全性，则可以使用 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 来密码保护页面？的详细内容。