Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How To Password Protect A Page Using Only 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.
Note: Client-side password protection provides basic content hiding but is not secure for truly sensitive data. For real security, use server-side authentication.
Approaches to Password Protect a Page
Here are two approaches to password protect a page using only HTML, CSS and JavaScript:
Basic JavaScript Password Authentication
This approach uses a prompt() dialog to get the user's password and validates it using a while loop.
How It Works
- A div container contains the protected content, initially hidden
- The
passcodeprotect()function usesprompt()to get user input - A while loop continues until the correct password is entered
- Upon successful authentication, the protected content is displayed using the
displayproperty
Example
<!DOCTYPE html>
<html>
<head>
<style>
#container {
background-color: #f0f8ff;
text-align: center;
padding: 20px;
border-radius: 8px;
margin: 20px auto;
max-width: 500px;
}
</style>
</head>
<body>
<div id="container" style="display: none;">
<h2>Access Granted!</h2>
<h3>Welcome to TutorialsPoint Protected Content</h3>
<p>This content is now visible after successful authentication.</p>
</div>
<script>
let password = "tutorial123";
(function passcodeprotect() {
let passcode = prompt("Enter Password to Access Protected Content:");
while (passcode !== password) {
if (passcode === null) {
// User clicked Cancel
alert("Access denied. Page will not load.");
return;
}
alert("Incorrect Password! Please try again.");
passcode = prompt("Enter Password to Access Protected Content:");
}
alert("Access Granted! Welcome!");
document.getElementById("container").style.display = "block";
})();
</script>
</body>
</html>
Password Protect using JavaScript Form Validation
This approach creates a more user-friendly interface using HTML forms instead of prompt dialogs.
How It Works
- An HTML form with password input field is displayed initially
- The protected content is hidden using
display: none - JavaScript validates the entered password using if-else statements
- On successful validation, the form is hidden and protected content is shown
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 50px auto;
padding: 20px;
}
#loginForm {
background-color: #f9f9f9;
padding: 30px;
border-radius: 8px;
text-align: center;
}
#container {
display: none;
background-color: #e8f5e8;
padding: 30px;
border-radius: 8px;
text-align: center;
border: 2px solid #4CAF50;
}
input[type="password"] {
padding: 10px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 4px;
margin: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.error {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="loginForm">
<h2>Protected Page Access</h2>
<p>Please enter the password to view protected content:</p>
<form id="passwordForm">
<input type="password" id="passwordInput" placeholder="Enter Password" required>
<br>
<button type="button" onclick="validatePassword()">Access Content</button>
</form>
<div id="errorMsg" class="error"></div>
</div>
<div id="container">
<h2>? Access Granted!</h2>
<h3>Welcome to TutorialsPoint Protected Content</h3>
<p>This is your protected content that is now visible after successful authentication.</p>
<p>You can add any sensitive information or premium content here.</p>
<button onclick="logout()">Logout</button>
</div>
<script>
const correctPassword = "SecurePass123";
function validatePassword() {
const inputPassword = document.getElementById("passwordInput").value;
const errorMsg = document.getElementById("errorMsg");
if (inputPassword === correctPassword) {
// Hide login form and show protected content
document.getElementById("loginForm").style.display = "none";
document.getElementById("container").style.display = "block";
errorMsg.textContent = "";
} else {
// Show error message
errorMsg.textContent = "Incorrect password! Please try again.";
document.getElementById("passwordInput").value = "";
document.getElementById("passwordInput").focus();
}
}
function logout() {
// Hide protected content and show login form
document.getElementById("container").style.display = "none";
document.getElementById("loginForm").style.display = "block";
document.getElementById("passwordInput").value = "";
}
// Allow Enter key to submit
document.getElementById("passwordInput").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
validatePassword();
}
});
</script>
</body>
</html>
Comparison
| Method | User Experience | Customization | Features |
|---|---|---|---|
| Prompt Dialog | Basic | Limited | Simple, immediate |
| HTML Form | Better | High | Styling, error messages, logout |
Security Considerations
- Client-side only: The password is visible in the source code
- Not truly secure: Anyone can view the HTML/JavaScript source
- Basic protection: Good for hiding content from casual viewers
- Real security: Use server-side authentication for sensitive data
Conclusion
Client-side password protection using HTML, CSS, and JavaScript provides basic content hiding but is not secure for sensitive data. Use the form-based approach for better user experience, but remember that true security requires server-side validation.
Updated on: 2026-03-15T23:19:01+05:30
27K+ Views
Advertisements