Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Creating Form Controls with the <input> Tag 327

12

Adding Options to Text Fields with datalist

One of the reasons that users don’t like to fill out forms on the Web is because they can
be very difficult to fill out. But HTML5 offers a new tag

With a data list, you can provide a set of answers that most people fill out, and as the
user types, the form guesses at what they want to write and provides suggestions as they
type. To do this, first you need a data list with a bunch of options:

Input ▼

Then you need to associate that list with the appropriate form control using the list
attribute:

Figure 12.7 shows how Chrome displays a data list.

Output ▼

FIGURE 12.7
A text field with a
data list attached.