HTML5 Input Autocomplete

·

3 min read

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.

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 the name. If you are asking for an address, use names like:

  • address-1
  • address-2
  • city
  • state or province
  • zip or postal-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.)

The values are listed here: developer.mozilla.org/en-US/docs/Web/HTML/A..

Component Design

input component

input component should have the capability to let the consumer to set the autocomplete value.

address component

  • When we need to design an address form, the autocomplete should be considered. The autocomplete attribute should be set properly.

  • Internationalization should be considered, since different country/region may have different address form format, for example:

United Kingdom

Address input forms in the UK should contain one address level and one, two or three address lines, depending on the address. A complete address would look like so:

103 Frogmarch Street Upper-Wapping Winchelsea TN99 8ZZ

China

China can use as many as three administrative levels: the province, the city, and the district.

The 6 digit postal code is not always needed but when supplied it is placed separately with a label for clarity. For example:

北京市东城区建国门北大街8号华润大厦17层1708单元 邮编:100005

Read more:

html.com/attributes/input-autocomplete/#ixz.. developer.mozilla.org/enUS/docs/Web/HTML/At..