Form Mastery - HTML5 Mastery: Semantics, Standards, and Styling - page 156

Autocomplete and autofocus
Autocomplete is a feature web browsers have for helping fill out the details on a form
automatically. If someone is filling in their name, address, phone number, etc., re-
peatedly on different forms (when creating accounts on e-commerce sites, for instance),
the autocomplete feature can store these values and then fill them into similar forms that
are filled out in the future. This is a preference set in the web browser application. In
coordination with this feature comes the autocomplete attribute, which allows the
browser's autocomplete feature to be turned off for individual elements in a form or for
the form as a whole. This might be done for fields that are receiving sensitive data or
that will never be needed for another form. The attribute has a value of either on or off ,
as follows:
<form method="post" autocomplete="off">
This will turn autocomplete off for all the form controls in this example form.
The autofocus attribute is straightforward enough; it is a Boolean attribute, which
when added to a form control makes the focus jump to the specified element immedi-
ately when the page loads. This means the user can start typing immediately without the
need to click the first (or whichever) element beforehand. It is supported on button ,
input , keygen , select , and textarea . Adding this attribute is only really a good
idea to do if there is no other input on the page that the user may want to click first.
Using data lists
The majority of the input types include an attribute called list 5 that works with a new
element—the datalist . This element defines a list of options that are available when
entering data into a form control input. The datalist element itself is not shown on
the web page but instead provides data to the list attribute of other elements in the
form. As an example, let's take a snippet from a form for an online job application. There
might be a text input field that requests the desired salary range, like so:
<p><input type="text" name="salary" placeholder="Enter de-
sired salary" /></p>
The user could enter any amount, but it would help to provide a list of common values
for the user to choose from. For example, the following values might be shown:
40,000+
60,000+
80,000+