Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Password Protect a Page Using HTML, CSS, and JavaScript
To password protect a page using only HTML, CSS and JavaScript, is an important security measure for webpages that contain sensitive information or require authentication for access. In this article, we will understand how to create a simple form that requires users to enter a password before they can view the content of your protected page.
In this article, we are having some textual information, our task is to password protect page using only HTML, CSS and JavaScript.
Approaches to Password Protect a Page
Here is a list of approaches to password protect a page using only HTML, CSS and JavaScript which we will be discussing in this article with stepwise explaination and complete example codes.
Basic JavaScript Password Authentication
To password protect a page using only HTML, CSS And JavaScript, we will be using an alert box to get the user's input value and use while loop to match the entered password and the correct password.
- First, We have created a div container displaying two headings upon entering correct password. We have set the background-color of div and centered the text using text-align property.
- We have cretaed a function named passcodeprotect for validating password. We have used simple while loop to check if entered password is correct or wrong.
- We have used prompt() to get the user's input and is stored in a variable named passcode. Then passcode is compared with password.
- If entered password is incorrect, then it display an alert box showing incorrect password and function is called again.
- If the password is same i.e correct password, then it displays an alert and the div container is displayed using display property. It does so by getting the container using getElementById and then using display property.
Example
Here is a complete example code implementing above mentioned steps to password protect a page using only HTML, CSS and JavaScript.
<!DOCTYPE html>
<html>
<head>
<style>
#container {
background-color: #f0f8ff;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h2>Correct Password</h2>
<h3>Welcome to TutorialsPoint..</h3>
</div>
<script>
let password = "tutorial";
(function passcodeprotect() {
let passcode = prompt("Enter PassCode");
while (passcode !== password) {
alert("Incorrect PassCode");
return passcodeprotect();
}
}());
alert('Welcome To The TP..!');
document.getElementById("container")
.style.display = "block";
</script>
</body>
</html>
Password Protect using Javascript Form Validation
In this approach to password protect a page using only HTML, CSS And JavaScript, we will be using HTML forms to get the user's input value. User's input value is then compared with correct password using if-else statement.
- First, we have created a form using HTML form tag that consist of an input field and a button.
- Then, we have created a div container displaying two headings upon entering correct password. We have set the background-color of div and centered the text using text-align property.
- We have created a function named fun for validating password. We have used simple if-else conditional statement to check if entered password is correct or wrong.
- The user's input value is read using value property and is stored in a variable named inputPswd. Then inputPswd is compared with correctPswd.
- If the password is same i.e correct password, then it displays the div container using display property. It does so by getting the container using getElementById and then using display property.
- If the password is not same i.e incorrect password, then it displays an alert stating incorrect password using alert method.
Example
Here is a complete example code implementing above mentioned steps to password protect a page using only HTML, CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container {
display: none;
background-color: #f0f8ff;
text-align: center;
}
</style>
</head>
<body>
<h2>Enter Password</h2>
<form id="pswd">
<input type="password" id="validate"
placeholder="Enter Password">
<button type="button" onclick="fun()">Submit</button>
</form>
<div id="container">
<h2>Correct Password</h2>
<h3>Welcome to TutorialsPoint..</h3>
</div>
<script>
function fun() {
let inputPswd = document.getElementById("validate")
.value;
let correctPswd = "TutorialsPoint";
if (inputPswd === correctPswd) {
document.getElementById("container")
.style.display = "block";
document.getElementById("pswd")
.style.display = "none";
} else {
alert("Incorrect password!");
}
}
</script>
</body>
</html>
Conclusion
In this article, we understood how to password protect a page using only HTML, CSS and JavaScript. We have used two simple approaches to illustrate how to password protect a page which are by using JavaScript-based form validation and basic Javascript paassword authentication.
22K+ Views
