HTML autocomplete Attribute

Last Updated : 06 Jan, 2025

The HTML <form> autocomplete attribute allows the browser to automatically fill the form fields based on previous user inputs.

Used to save time by reusing data like names, emails, and addresses.
It can be turned “on” or “off” depending on the field’s requirements.

Syntax

<form autocomplete="on|off">

Attribute Values

on: It has a default value. It specifies that autocomplete is enabled.
off: It specifies that the autocomplete is disabled.

html

<html>
<body>
    <form autocomplete="on">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email"><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

The autocomplete=”on” attribute is used to allow the browser to automatically fill in values for the form fields based on previously entered data.
When autocomplete is enabled, browsers try to predict and offer values for the name, email, or other fields.

If you’re still curious and want to explore more about the <form> tag, check out our detailed guide by clicking Here!

More Example of HTML <form> autocomplete Attribute

1. Basic Form with Autocomplete Enabled

HTML

<html>
<body>
    <form autocomplete="on">
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username"><br><br>
        
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email"><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

In this example:

The autocomplete=”on” attribute enables the browser to suggest previously entered values for the username and email fields.
This feature enhances user experience by reducing the need to re-enter information.

2. Form with Specific Autocomplete Values

HTML

<!--Driver Code Starts{-->
<html>
<head>
    <style>
        form {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"], input[type="email"], input[type="password"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<!--Driver Code Ends }-->

<body>
    <form autocomplete="on">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" autocomplete="username">
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" autocomplete="email">
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" autocomplete="new-password">
        
        <input type="submit" value="Register">
    </form>
</body>

<!--Driver Code Starts{-->
</html>

<!--Driver Code Ends }-->

In this example:

The autocomplete=”on” attribute enables autocomplete for the entire form.
Specific autocomplete values like username, email, and new-password are set on individual input fields to guide the browser in providing appropriate suggestions.

Best Practices for HTML <form> Autocomplete Attribute

Use autocomplete=”on” to enhance user experience by auto-filling known data.
Set specific autocomplete values (e.g., username, email) for better browser suggestions.
Disable autocomplete (autocomplete=”off”) only for sensitive or secure fields like OTPs.

HTML <form> Autocomplete Attribute – FAQs

What is the autocomplete attribute in HTML?

The autocomplete attribute allows browsers to automatically fill in form fields based on previously entered values.

What happens if I don’t specify the autocomplete attribute?

The browser’s default behavior is applied, which is usually on unless explicitly disabled.

Is autocomplete safe for password fields?

Yes, but ensure proper security measures like HTTPS are in place to avoid data theft.

How do I handle custom input fields with autocomplete?

Use specific autocomplete tokens like street-address or tel for custom fields.

Does autocomplete work on all browsers?

It is supported by most modern browsers but may behave differently depending on the version.

HTML accept-charset Attribute

ManasChhabra2

Improve

Article Tags :

HTML autocomplete Attribute

Syntax

1. Basic Form with Autocomplete Enabled

In this example:

2. Form with Specific Autocomplete Values

Best Practices for HTML <form> Autocomplete Attribute

HTML <form> Autocomplete Attribute – FAQs

What is the autocomplete attribute in HTML?

What happens if I don’t specify the autocomplete attribute?

Is autocomplete safe for password fields?

How do I handle custom input fields with autocomplete?

Does autocomplete work on all browsers?

Similar Reads

HTML Form Element Attributes

HTML Input Element Attributes

HTML Textarea Element Attributes

HTML Button Element Attributes

HTML Select Element Attributes

HTML Option Element Attributes

HTML Optgroup Element Attributes

HTML Label Element Attributes

HTML Fieldset Element Attributes

HTML Legend Element Attributes

Thank You!

What kind of Experience do you want to share?