How to prevent browser to remember password in HTML ? - GeeksforGeeks

24 Feb, 2022
Browsers remember information which 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. Method 1: One of the known methods is to use autocomplete attribute to prevent browser to remember the password. In the input field, if we define autocomplete=”off” then many times the input value is not remembered by the browser. Syntax: 
<input type = "password" autocomplete="off">
Example: In many cases, if we don’t use the autocomplete=”off” property then the browsers give us suggestions of the input fields, like below  
This is for password field, but also we get the suggestions for other fields except password., like below,  
To prevent this kind of things use autocomplete=”off” property. see below code,Example 1:  
html
<!DOCTYPE html><html> <body>    <div style="background-color:        #7fff00; width: 30%;">         <h2 style="color: #006400;">            Preventing Password remember        </h2>         <!-- autocomplete = "off" it causes for            allover the form where input            fields are used -->        <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:  
Now, there is no suggestions for fields are given.
 
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’);” >
Here, readonly property sets or returns a boolean value if the field is read-only, or not, read-only field cannot be modified.Example 2:  
html
<!DOCTYPE html><html> <body>    <div style="background-color:        #7fff00; width: 30%;">         <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 />                         <!--"removeAttribute()" method                removes the specified attribute                from an element-->            <input id="uname" type="submit" />        </form>    </div></body> </html>
Output:  
Method 2: Now another method by 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:  
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 style="background-color: #7fff00; width: 30%;">        <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();" />            &nbsp; &nbsp;            <input id="remove" type="button"                value="Remove given Password"                onclick="dltPass();" />                             <p id="show"></p>        </form>    </div></body> </html>
Output:  
Method 3: Another method of preventing browsers to remember password is, using autocomplete=”new-password”, by 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:  
html
<html> <body>    <div style="background-color: #7fff00;                    width: 30%;">        <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 />                         <!--used autocomplete="new-password" -->            <input id="uname" type="submit" />        </form>    </div></body> </html>
Output:  
 
varshagumber28
HTML-Misc
JavaScript-Misc
Picked
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to update Node.js and NPM to next version ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
File uploading in React.js