HTML and CSS Reference
In-Depth Information
<p><button type="submit">Submit</button></p>
</form>
Discussion
The
datalist
element is used to define a list of suggested values for other input
controls—it is not a form input or control itself.
The suggested values are specified using
option
elements, just as they would be for a
select
element, but nothing renders on the screen until the
datalist
is associated with
an
input
element. Binding a
datalist
to an input field is done by specifying an
id
on
the
datalist
and using this as the value of the
list
attribute on the
input
element.
The result is a control that both accepts user input and presents a list of options for the
user to choose from. This is not unlike the type-ahead or autocomplete functionality
implemented in many browsers and on most search websites, as shown in Figures
3-18
and
3-19
.
Figure 3-18. An editable drop-down rendered using input and datalist in Firefox 4
