How to use autocomplete attribute In HTML

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 />
  
            <!--"removeAttribute()" method 
                removes the specified attribute
                from an element-->
            <input id="uname" type="submit" />
        </form>
    </div>
</body>
  
</html>


Output:

How to prevent browser to remember password in HTML ?

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:

Table of Content

  • Using autocomplete attribute
  • By Deleting cookies
  • Using autocomplete=”new-password”

Similar Reads

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

By Deleting cookies

...

Using autocomplete=”new-password”

...