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
How to prevent browser to remember password in HTML?
Browser password storage is a common feature that saves login credentials for user convenience. However, this automatic behavior can pose security risks and privacy concerns, especially on shared computers or when handling sensitive applications. The browser stores form data and passwords in local storage, cookies, or browser-specific password managers.
While password suggestions are helpful for regular websites, they should be disabled for sensitive applications like banking, admin panels, or any system where unauthorized access could cause harm. This tutorial demonstrates how to prevent browsers from remembering passwords using HTML attributes and JavaScript techniques.
Using the Autocomplete Attribute
The autocomplete attribute is the primary HTML method to control browser password storage and suggestions. When set to off, it instructs the browser not to store or suggest previously entered values for that field.
Syntax
Following is the syntax for using the autocomplete attribute
<input type="password" autocomplete="off">
The autocomplete attribute accepts several values
offDisables autofill and password saving completelynew-passwordSuggests new strong passwords instead of saved onescurrent-passwordFor login forms (default behavior)
Example Disabling Password Storage
Following example demonstrates how to prevent browsers from storing login credentials
<!DOCTYPE html>
<html>
<head>
<title>Prevent Password Storage</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Login Form - No Password Storage</h3>
<form method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" autocomplete="off" style="padding: 8px; margin: 5px 0; width: 200px;"><br><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd" autocomplete="off" style="padding: 8px; margin: 5px 0; width: 200px;"><br><br>
<input type="button" value="Submit" onclick="showData()" style="padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer;">
</form>
<div id="output" style="margin-top: 20px; padding: 10px; background: #f8f9fa; border-radius: 5px;"></div>
<script>
function showData() {
let output = document.getElementById("output");
var username = document.getElementById("username").value;
var password = document.getElementById("pwd").value;
if (username && password) {
output.innerHTML = "<strong>Submitted Data:</strong><br>Username: " + username + "<br>Password: " + password;
output.innerHTML += "<br><br><em>Note: Browser will not store these credentials. Try refreshing and filling the form again!</em>";
} else {
output.innerHTML = "<span style='color: red;'>Please fill in both fields.</span>";
}
}
</script>
</body>
</html>
The output displays the form data without storing it in browser memory. After refreshing the page, no previous values will be suggested.
Login Form - No Password Storage Username: [input field - no suggestions] Password: [input field - no storage] [Submit Button] After submission: "Submitted Data: Username: john, Password: secret123" Note: Browser will not store these credentials.
Example Using New-Password Value
For registration forms, the new-password value instructs browsers to suggest strong passwords instead of saved ones
<!DOCTYPE html>
<html>
<head>
<title>Registration Form - New Password</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Create Account - Password Generator</h3>
<form method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" autocomplete="username" style="padding: 8px; margin: 5px 0; width: 250px;"><br><br>
<label for="pwd">New Password:</label><br>
<input type="password" id="pwd" name="pwd" autocomplete="new-password" style="padding: 8px; margin: 5px 0; width: 250px;"><br><br>
<label for="confirm">Confirm Password:</label><br>
<input type="password" id="confirm" name="confirm" autocomplete="new-password" style="padding: 8px; margin: 5px 0; width: 250px;"><br><br>
<input type="button" value="Create Account" onclick="validateForm()" style="padding: 10px 20px; background: #28a745; color: white; border: none; cursor: pointer;">
</form>
<div id="output" style="margin-top: 20px; padding: 10px; background: #f8f9fa; border-radius: 5px;"></div>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("pwd").value;
var confirm = document.getElementById("confirm").value;
var output = document.getElementById("output");
if (!username || !password || !confirm) {
output.innerHTML = "<span style='color: red;'>All fields are required.</span>";
return;
}
if (password !== confirm) {
output.innerHTML = "<span style='color: red;'>Passwords do not match.</span>";
return;
}
output.innerHTML = "<span style='color: green;'><strong>Account created successfully!</strong></span><br>Username: " + username;
output.innerHTML += "<br><em>Browser may suggest strong passwords but won't save your custom password.</em>";
}
</script>
</body>
</html>
Modern browsers will offer to generate strong passwords when clicking in the password field, but won't save the final entered password.
Create Account - Password Generator Username: [input field] New Password: [may show password generator option] Confirm Password: [no suggestions] [Create Account Button]
Clearing Browser Storage Programmatically
Another approach involves clearing stored credentials using JavaScript after form submission. This method works by removing any cached form data from browser storage mechanisms.
Syntax
Following is the syntax for clearing browser cookies programmatically
document.cookie = "cookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
To clear form data completely, you can also reset the form and clear localStorage
// Clear form
document.getElementById("formId").reset();
// Clear localStorage
localStorage.removeItem("userData");
Example Programmatic Password Clearing
Following example demonstrates clearing stored data after form submission
<!DOCTYPE html>
<html>
<head>
<title>Clear Browser Storage</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Secure Login - Auto Clear Storage</h3>
<form id="loginForm" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" placeholder="Enter username" required style="padding: 8px; margin: 5px 0; width: 250px;"><br><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd" placeholder="Enter password" required style="padding: 8px; margin: 5px 0; width: 250px;"><br><br>
<input type="button" value="Secure Login" onclick="secureSubmit()" style="padding: 10px 20px; background: #dc3545; color: white; border: none; cursor: pointer;">
<input type="button" value="Clear Form" onclick="clearForm()" style="padding: 10px 20px; background: #6c757d; color: white; border: none; cursor: pointer; margin-left: 10px;">
</form>
<div id="output" style="margin-top: 20px; padding: 10px; background: #f8f9fa; border-radius: 5px;"></div>
<script>
function secureSubmit() {
var username = document.getElementById("username").value;
var password = document.getElementById("pwd").value;
var output = document.getElementById("output");
if (!username || !password) {
output.innerHTML = "<span style='color: red;'>Please fill in all fields.</span>";
return;
}
// Simulate processing
output.innerHTML = "<span style='color: green;'><strong>Login successful!</strong></span><br>Processing...";
// Clear any potential cookies
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie = "password=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
// Clear localStorage if any
localStorage.removeItem("loginData");
sessionStorage.removeItem("loginData");
// Clear form after short delay
setTimeout(function() {
clearForm();
output.innerHTML += "<br><em>Form cleared and browser storage cleaned for security.</em>";
}, 1500);
}
function clearForm() {
document.getElementById("loginForm").reset();
document.getElementById("username").value = "";
document.getElementById(" 
1K+ Views
