HTML and CSS Reference
In-Depth Information
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
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">
Search WWH ::

Custom Search