Home > Article > Web Front-end > How to password protect a page using only HTML, CSS and JavaScript?

How to password protect a page using only HTML, CSS and JavaScript?

WBOYforward: 2023-09-07 14:33:02911browse

如何仅使用 HTML、CSS 和 JavaScript 来密码保护页面？

Password protection is an important security measure for web pages that contain sensitive information or require authentication to access. If you want to add extra security to your web pages without using a server-side language, you can password-protect your pages using HTML, CSS, and JavaScript.

This article will show you how to create a simple form that requires users to enter a password to view the contents of a protected page. Let’s look at the following example to better understand using password to protect a page.

Example

In the example below, we are running a script and protecting a web page; if the user attempts to access the web page, they will be prompted for a password.

<!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>

When the script is executed, it will generate an output showing an alert asking for a password. When the user matches the password ("tutorial"), a message is displayed; otherwise, the incorrect password is displayed on the web page.

Example

Consider the following example where we create an input field for a password to be entered to protect a web page as well as a button click.

<!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>

When running the above script, an output window will pop up showing the input field for entering the password and the click button on the web page. If the user matches the password (12345), it will open a form consisting of text; otherwise, the wrong password will be displayed.

Example

Execute the following example where we run a script to protect a web page from displaying its content after executing the script.

<!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>

When the script is executed, it will generate an output showing the input field for entering the password and the toggle checkbox on the web page. When the user matches the password (54) and toggles the checkbox, the content within the web page is displayed.

The above is the detailed content of How to password protect a page using only HTML, CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to exit the editing state in IText using FabricJS?Next article：How to exit the editing state in IText using FabricJS?

See more

How to password protect a page using only HTML, CSS and JavaScript?

Example

Example

Example

Related articles