HTML and CSS Reference
In-Depth Information
datalist
The
datalist
element, introduced in HTML5, contains a set of suggested, predefined values for an
input
element that appear as a list of options. But unlike a
select
element, the control can still accept other
values besides those in the
datalist
. Using the
datalist
element with an
input
element effectively
combines the features of a freeform text field that accepts any text entered and a
select
element that
presents an explicit set of options.
In user interface terminology, such a combined text-entry-plus-list-component device is
commonly known as a
combo box
. They've been part of software and operating systems
for decades, but HTML didn't have a web-ready equivalent until now.
You can associate an
input
element with a
datalist
element by way of the
list
attribute, whose value
is the ID of the particular
datalist
element you're targeting (hence the
datalist
element requires a
unique
id
attribute). When a user activates the input, either by clicking the field with a pointer or by typing
into it, the list of options will appear. In most browsers—those that support the
datalist
element, at
least—the options shown will be pattern matches for the text typed, and the list updates automatically as
the user continues typing, narrowing the available options. If the list appears after a click instead of a
keystroke and the text field is still empty, the entire list will appear (usually with only five to ten options
visible, and a scroll bar to reach the full list).
Each option within a
datalist
element is an
option
element, formerly an exclusive child of the
select
element but now serving double duty in HTML5. A
datalist
element can't contain any other elements
besides
option
s, not even
optgroup
. When an
option
element appears in a
datalist
it takes on some
slightly different rules and properties. Inside a
datalist
, the
option
element no longer requires an end
tag, and can instead be treated as a void element, but only if it carries its value in a
value
attribute. If the
option contains text and also bears a
value
attribute, the text label will appear in the menu but, once
selected, the
value
attribute is inserted into the text field for submission with the form; an
option
element's
value
attribute always trumps its text label. Unlike most other void elements in HTML5, an
option
element lacking an end tag cannot be self-closed with a trailing slash.
Listing 8-20 shows an example of an
input
element associated with its supporting
datalist
element.
Here we've omitted any text inside the
option
elements, treating them as void elements with
value
attributes. A person filling in this form would be able to type the name of a city into the field and, if the first
few letters match some of the options in the
datalist
, that list would appear, saving the user a few
keystrokes.
Listing 8-20.
A text input and its associated
datalist
<label for="city">Base of operations</label>
<input type="text" name="city" id="city" list="citieslist">
<datalist id="citieslist">
<option value="Attilan">
<option value="Bludhaven">
<option value="Coast City">
