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

Last Updated : 18 Nov, 2020

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:

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.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        HTML autocomplete attribute
    </title>
    
    <style>
        form {
            margin: 10%;
        }
        .form-control {
            margin-top: 10px;
        }
    </style>
    
    <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    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>

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.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        HTML autocomplete attribute
    </title>
    
    <style>
        form {
            margin: 10%;
        }
        .form-control {
            margin-top: 10px;
        }
    </style>
    
    <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    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>