How to prevent browser to remember password in HTML ?
Last Updated :
22 Jan, 2024
Browsers remember information that is submitted through <input> fields on websites for the first time when we use that particular website in that browser. So another time when we again submit data on that website through that browser then there is a suggestion list of submitted values in that field. Many times this may create security issues for many cases. Some of the methods are as:
Using autocomplete attribute
To prevent the browser from remembering passwords in HTML, set the autocomplete attribute to “off” in the form tag. This attribute prevents the browser from suggesting or saving previously entered passwords for the form.
Syntax:
<input type = "password" autocomplete="off">
Example: In this example, we will see how to prevent the browser from remembering passwords by using autocomplete method.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Prevent Password remember</title>
</head>
<body>
<div>
<h2 style="color: #006400;">
Preventing Password remember
</h2>
<form name="Frm" autocomplete="off">
User Name :
<input id="username" type="text"
name="userName" />
<br /><br />
Password:
<input id="password" type="password"
name="passWord" />
<br /><br />
<input id="uname" type="submit" />
</form>
</div>
</body>
</html>
|
Output:
In many modern browsers this attribute does not make any effect. So, in this case, if we use one more thing under the input field then this problem can be fixed.
<input type=”password” autocomplete=”off” readonly onclick=”this.removeAttribute(‘readonly’);” >
Example 2: In this example readonly property sets or returns a boolean value if the field is read-only, or not, read-only field cannot be modified.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Prevent Password remember</title>
</head>
<body>
<div>
<h2 style="color: #006400;">
Preventing Password remember
</h2>
<form name="Frm">
User Name :<input id="username" type="text"
name="userName" autocomplete="off"
readonly
onclick="this.removeAttribute('readOnly');" />
<br /><br />
Password: <input id="password" type="password"
name="passWord" autocomplete="off"
readonly
onclick="this.removeAttribute('readOnly');" />
<br /><br />
<input id="uname" type="submit" />
</form>
</div>
</body>
</html>
|
Output:
By Deleting cookies
This method in which we can use to remove the password, also other values from the form. The values are stored in the browser in the form of a cookie, so if the cookies are deleted then the password, as well as other values, also deleted. So only we have to add a function to delete the cookies.
Example 1:In this example we will see how to prevent browser to remember password by deleting cookies.
html
<html>
<head>
<script type="text/javascript">
function savePass() {
passVal = "password = "
+ escape(document.Frm.passWord.value)
+ ";";
document.cookie = passVal
+ "expires = Sun, 01-May-2021 14:00:00 GMT";
document.getElementById("show").innerHTML =
"Password saved, " + document.cookie;
}
function dltPass() {
document.cookie = passVal
+ "expires = Sun, 01-May-2019 14:00:00 GMT";
// Set the expiration date to
// removes the saved password
document.getElementById("show").innerHTML =
"Password deleted!!!";
// Removes the password from the browser
document.getElementById("pass").value = "";
// Removes the password from the input box
}
</script>
</head>
<body>
<div>
<h2 style="color: #006400;">
Preventing Password remember
</h2>
<form name="Frm">
User Name :
<input id="username" type="text"
name="userName" />
<br /><br />
Password:
<input id="pass" type="password"
name="passWord" />
<br /><br />
<input id="uname" type="button" value="submit"
onclick="savePass();" />
<input id="remove" type="button" value="Remove given Password"
onclick="dltPass();" />
<p id="show"></p>
</form>
</div>
</body>
</html>
|
Output:
Using autocomplete=”new-password”
Using this the browser will give random password suggestions while filling the password field in any form. So the actual password will not be saved in the browser. The browser hides the actual password and showing rand suggestions all the time.
<input type = "password" autocomplete="new-password">
Example: In this example we will use the autocomplete=”new-password” method to prevent browser to remember password.
html
<html>
<body>
<div>
<h2 style="color: #006400;">
Preventing Password remember
</h2>
<form name="Frm">
User Name :
<input id="username" type="text"
name="userName" />
<br /><br />
Password:<input id="password" type="password"
name="passWord" autocomplete="new-password" />
<br /><br />
<input id="uname" type="submit" />
</form>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...