How to Manage Form Autocomplete in HTML5

You've probably experienced it yourself, but having a web page that offers to fill itself in automatically, especially when the form contains many fields, can prove very handy.

Knowing how to make a form pleasant to use is a UX point that should never be overlooked, as forms are among the biggest barriers to entry.

In HTML, there's an attribute designed specifically for this, aptly named: autocomplete.

Enabling autocompletion

To enable autocompletion, nothing could be simpler. Just add the autocomplete attribute to the desired form field, like below:

<input type="email" id="email" autocomplete="email"/>

But it's also possible to simply enable autocompletion with the value "on" and let the browser decide on the most relevant value:

<input type="text" id="username" autocomplete="on"/>

Possible values

There are dozens of possible values for the autocomplete attribute, such as:

• name
• family-name
• email
• current-password
• username
• street-address
• ...

I invite you to check out the MDN documentation for the attribute to discover all the possible values!

A few conditions

Since each browser handles autocompletion differently, some of them may require a few additional conditions, which can be worth adding just in case.

Among these conditions are:

• Having a "name" and/or "id" attribute on the field
• Having a <form> as a parent
• Adding a "submit" type button to the form

Disabling autocompletion

It's also possible to force the browser to disable autocompletion by using the "off" value of the attribute, like this:

<input type="text" id="username" autocomplete="off"/>

And you also have the option to disable it for the entire form:

<form method="POST" action="..." autocomplete="off">
  <!-- content -->
</form>

Note, however, that in most browsers, setting autocomplete to "off" won't prevent password managers from appearing (saving and filling), since these are extensions external to the page.

To learn more

As always, if you want to learn more about this attribute, I invite you to read Mozilla's very thorough documentation on the subject:

The HTML autocomplete attribute - HTML: HyperText Markup Language | MDN