Help users checkout faster with Autofill

People hate filling out web forms, especially on mobile devices. They can be
slow and frustrating to complete and often contain multi-page steps and
validation issues. This leads to high user drop-off and frustration. To help
make things easier for users, browsers have long been able to autocomplete
fields on behalf of the user. Chrome took this a step further in 2011 by
introducing Autofill,
which fills in entire forms based on a user's Autofill profile.

Starting in the next major version of Chrome (M43), we're taking yet another
step to help users fill out forms faster by expanding our support for credit
cards and addresses in Google. This means that the same information users use to
purchase things inside of the Google Play store are now available to them on
websites. By using the standard autocomplete attributes, you can ensure your
users' happiness by helping Chrome autofill your checkout forms with 100%
accuracy.

Autocomplete attributes are a way for you, the developer, to control how the
browser should populate a given form field. For example, if you are expecting a
street address you can hint to the browser that you are expecting it by using
autocomplete="address-line1". This prevents the browser from incorrectly
guessing form fields on your website which can result in a poor user experience.

We've found that by correctly using autocomplete attributes on your forms, users
complete them up to 30% faster. And since autocomplete is part of the
WHATWGHTML
standard, we hope that other browsers will support it in the near future.

In the past, many developers would add autocomplete="off" to their form fields
to prevent the browser from performing any kind of autocomplete functionality.
While Chrome will still respect this tag for autocomplete data, it will not
respect it for autofill data. So when should you use autocomplete="off"? One
example is when you've implemented your own version of autocomplete for search.
Another example is any form field where users will input and submit different
kinds of information where it would not be useful to have the browser remember
what was submitted previously.

The most common autocomplete attributes are shown in the table below and are
documented in Web Fundamentals.

Use labels on form inputs, and ensure they're visible when the
field is in focus. The label element provides direction to the user, telling
them what information is needed in a form element. Each label is associated
with an input element by placing it inside the label element. Applying labels
to form elements also helps to improve the touch target size: the user can
touch either the label or the input in order to place focus on the input
element.

Use placeholder to provide guidance about what you expect. The
placeholder attribute provides a hint to the user about what's expected in
the input, typically by displaying the value as light text until the user
starts typing in the element. Placeholders disappear as soon as the user
starts typing in an element, thus they are not a replacement for labels. They
should be used as an aid to help guide users on the required format and
content.