When To Use Input Autocomplete In HTML (And When List Or Datalist)
- Attribute of
- How To Use Input To Create Form Fields In HTML: Easy Tutorial
- What does
When To Use Input Autocomplete In HTML (And When List Or Datalist)do? - Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields.
Contents
Code Example
<form>
<label for="email">Email Address</label><br>
<input type="email" name="email" id="email" autocomplete="on">
</form>New(ish) in HTML5
The autocomplete attribute was introduced as an unofficial HTML feature in Microsoft’s Internet Explorer, and was adopted by a number of other browsers. So there has been wide support for it for a long time, although its exact behavior wasn’t standardized. With HTML5, the autocomplete attribute is an official part of the specification.
autocomplete vs. list & <datalist>
The autocomplete attribute asks the browser to attempt autocompletion, based on user history. This is useful for personal details like name and email address — things the user is likely to have types into similar input fields on other web sites. The autocomplete feature is not able to provide the browser with a list of site-specific autocomplete options. For autocomplete behavior with site-specific suggestions, use the list attribute with the <datalist> element.
Deliberately “broken”
All the major browsers ignore the autocomplete="off" value for certain types of input fields. Internet Explorer and Edge ignore it for all password fields. Firefox ignores it for any field in a login form. Chrome ignores it any time the user has elected to let the browser remember form data. Safari ignores it for username, email, and password fields. Ignoring the autocomplete="off" value is done to enhance usability, and gve the user more control over autocomplete behavior. As a UX designer, you should follow their lead and use autocomplete="off" sparingly. There are are very few use cases in normal forms where it really makes sense to disallow autocomplete. In some complex apps, it makes sense to avoid accidental inputs, but with most standard forms there really is no reason for it.
Autocomplete and name
Browsers use the name attribute in order to figure out what type of information an input field is asking for. So use standard, meaningful values for name. If you are asking for an address, use names like:
address-1address-2citystateorprovinceziporpostal-code
Don’t use clever or oddly specific names, as that makes it harder for the browser to provide autocomplete suggestions, and it can even lead to the browser trying to fill in the wrong values into the wrong inputs. (Have you ever had your browser fill your phone number into the zip code field? That was the fault of bad naming.)
Values of the autocomplete Attribute
| Value Name | Notes |
|---|---|
| off | Turns autocomplete off. |
| on | Turns autocomplete on. |
All Attributes of input Element
| Attribute name | Values | Notes |
|---|---|---|
| step | Specifies the interval between valid values in a number-based input. | |
| required | Specifies that the input field is required; disallows form submission and alerts the user if the required field is empty. | |
| placeholder | Specifies placeholder text in a text-based input. | |
| pattern | Specifies a regular expression against which to validate the value of the input. | |
| multiple | Allows the user to enter multiple values into a file upload or email input. | |
| min | Specifies a minimum value for number and date input fields. | |
| max | Specifies a maximum value for number and date input fields. | |
| list | Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field. | |
| height | Specifies the height of an image input. | |
| formtarget | Specifies the browsing context in which to open the response from the server after form submission. For use only on input types of “submit” or “image”. | |
| formmethod | Specifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of “submit” or “image”. | |
| formenctype | Specifies how form data should be submitted to the server. Only for use on input types “submit” and “image”. | |
| formaction | Specifies the URL for form submission. Can only be used for type=”submit” and type=”image”. | |
| form | Specifies a form to which the input field belongs. | |
| autofocus | Specifies that the input field should be in focus immediately upon page load. | |
| accesskey | Defines a keyboard shortcut for the element. | |
| autocomplete | off on | Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields. |
| border | Was used to specify a border on an input. Deprecated. Use CSS instead. | |
| checked | Specifies whether a checkbox or radio button form input should be checked by default. | |
| disabled | Disables the input field. | |
| maxlength | Specifies the maximum number of characters that can be entered in a text-type input. | |
| language | Was used to indicate the scripting language used for events triggered by the input. | |
| name | Specifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted. | |
| size | Specifies the width of the input in characters. | |
| src | Defines the source URL for an image input. | |
| type | button checkbox file hidden image password radio reset submit text | Defines the input type. |
| value | Defines an initial value or default selection for an input field. |
Browser Support for autocomplete
 |  |  |  |  |  |
| All | All | All | All | All | All |