How to disable browser Autocomplete on web form field/input tag?

Input text autocomplete is the default feature of any browser. While working with the form or input fields in HTML web page autocomplete feature of the browsers come in the picture. By default autocomplete is enabled in browsers so when submitting the form it remembers the information. So when again open the same form or fill the same input fields it shows the suggestions which were filled earlier by the user.

The autocomplete attribute is used to enable and disable autocompletion of text. This attribute contains two values:

  • on
  • off

To disable the autocomplete feature in the form or input field the autocomplete attribute set to off.

Syntax:

autocomplete: on/off

Example: This example does not use autocomplete attribute so by default the autocomplete attribute is enable.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        HTML autocomplete attribute
    </title>
      
    <style>
        form {
            margin: 10%;
        }
        .form-control {
            margin-top: 10px;
        }
    </style>
      
    <link href=
    rel="stylesheet" >
</head>
  
<body>
    <div class="container col-lg-12 form">
      
    <form action="/submit" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <input type="text" class="form-control form-control-sm"
                id="name" name="username" placeholder="Enter Name">
                  
            <input type="text" class="form-control form-control-sm"
                id="email" name="email" placeholder="Enter Email">
                  
            <input type="text" class="form-control form-control-sm" 
                id="city" name="city" placeholder="Enter City">
            <br>
              
            <button type="submit" class="btn btn-primary">
                Submit
            </button>
        </div>
    </form>
    </div>
</body>
  
</html>                    

chevron_right


Output:


Note: The autocomplete suggestions will be displayed always as per previously filled information to the form.

Example 2: This example sets autocomplete attribute to off.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        HTML autocomplete attribute
    </title>
      
    <style>
        form {
            margin: 10%;
        }
        .form-control {
            margin-top: 10px;
        }
    </style>
      
    <link href=
    rel="stylesheet" >
</head>
  
<body>
    <div class="container col-lg-12 form">
      
    <form action="/submit" autocomplete="off" method="post"
                enctype="multipart/form-data">
        <div class="form-group">
            <input type="text" class="form-control form-control-sm"
                id="name" name="username" placeholder="Enter Name">
                  
            <input type="text" class="form-control form-control-sm"
                id="email" name="email" placeholder="Enter Email">
                  
            <input type="text" class="form-control form-control-sm" 
                id="city" name="city" placeholder="Enter City">
            <br>
              
            <button type="submit" class="btn btn-primary">
                Submit
            </button>
        </div>
    </form>
    </div>
</body>
  
</html>                    

chevron_right


Output:




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.