HTML5: Improving Forms With Autocomplete

html-formulare-teaser_EN

To complete form input faster, browsers offer the option of autocompletion. The entries made by the user are saved and suggested when the same or a similar form with the same information is filled in. The problem is, that the variations of certain entries – e.g. a name or a credit card number – prevent the word completion from working properly. The new attribute „autocomplete“ unifies the labels of a number of these entries.

HTML5 Autocompletion

Different Labels for Input Fields

When creating an HTML form, the user can freely distribute the „name“ attributes that are important for the further processing of the content. When asking for the credit card number during a purchasing transaction, there is a multitude of names for said input field: „credit-card“ and „ccard“ are two examples. This variety of terms makes it impossible for the browser to recognize reliably when a credit card number has to be entered. For that reason, browsers can only offer autocompletion for input fields with identical „name“-attributes.

autocomplete_input
Example of an Autocompletion

The new attribute „autocomplete“ is meant to solve these problems. In contrast to the „name“ attribute, which can be defined freely, there are set values for „autocomplete“ that always stand for a specific input. The label „cc-number“, for instance, always represents a credit card number.

1
<input type="text" name="credit card" autocomplete="cc-number" />

When filling in the example’s input field, the browser will assign said entry to the label „cc-number“ and save it for autocompletion. The browser will suggest this entry for every input field that uses the same term for „autocomplete“, ignoring the label of the „name“ attribute.

Fixed Terms for Credit Card Numbers, Names and Contacts

Since the credit card is the preferred payment method in ecommerce, there are „autocomplete“ labels for all important data concerning credit card payment. Besides the credit card number („cc-number“), there are also set terms for the owner’s name („cc-name“), the card approval number („cc-csc“), the card type („cc-type“) as well as the termination date („cc-exp-year“ for the year, „cc-exp-month“ for the month and „cc-exp“ for the total expiration date).

When entering name information, there are also several predetermined terms, representing the full name („name“), the first name („given-name“), the additional or second name („additional-name“) and the surname („family-name“).

There are also different „autocomplete“ values representing address information. „Autocomplete“ distinguishes between address data restricted to one input field („street-address“) and information that requires two input fields(„address-line1“ und „address-line2“). The term „address-level1“ represents the entry of a country or a province while „address-level2“ represents the city. The postal code is set as „postal-code“ and the state as „country“.

Furthermore, „autocomplete“ is able to differentiate between shipping and billing address. To do so, the two keywords „shipping“ and „billing“ can be consigned.

1
2
3
<input type="text" name="shipping_street" autocomplete="shipping street-address" />
<input type="text" name="shipping_postalcode" autocomplete="shipping postal-code" />
<input type="text" name="shipping_place" autocomplete="shipping address-level1" />

In this example, street address, postal code and location are being requested for the shipping address.

There is only one label each for email addresses („email“) and phone numbers („tel“). There is no further distinction e.g. between business or private phone number.

Browser Support

Currently, only Chrome starting from version 43 supports this new feature. However, it can be used without any concerns, as older versions and different browsers simply ignore it.

(dpe)

Denis Potschien

Denis works as a freelance web designer since 2005.

Sort by:   newest | oldest | most voted
Alex
Guest

Perhaps the most important thing for websites nowadays is ease of use. The most popular websites are those ones which make it as easy as possible to complete the task at hand. This new HTML feature is part of that trend.

Mark Sizer
Guest

This sounds like a great addition to HTML 5. However I’m struggling to find any official mention of it for a full spec / break down. It’s not part of the HTML5 standard as far as I can see: http://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

Also, there’s no mention of it in the Chrome 43 feature list: https://www.chromestatus.com/features

Finally, I’m on chrome 46 and the auto-complete settings don’t offer to differentiate between shipping/billing addresses.

What is your source / reference for this? Citation required! :-)

Samuele Valerio
Guest

This autocomplete values could be really usefull, hope they become a standard soon.
Thanks for sharing

wpDiscuz