How to prevent browser to remember password in HTML ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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 passeord from the browser
  
            document.getElementById("pass").value = "";
            // Removes the passeord 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();" />
                 
            <input id="remove" type="button"
                value="Remove given Password" 
                onclick="dltPass();" />
                  
            <p id="show"></p>
        </form>
    </div>
</body>
  
</html>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.