HTML5: Improving Forms With Autocomplete

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.

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. 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.

<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.

<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)