HTML and CSS Reference
In-Depth Information
Suggesting Options with Data Lists
The last data field that Alice wants added to the survey form is a text box in which cus-
tomers can indicate their favorite Red Ball Pizza dish. There are a lot of possible answers
and Alice doesn't want to limit the options to a selection list, but she does want to pro-
vide suggestions to customers as they type their entries. For example, as the user types
a B , Alice would like the text box to display entries such as Big Kahuna Pizza or BBQ
Chicken Pizza (both of which are Red Ball Pizza specials that start with B ).
You can create this effect using the HTML5 datalist element
<datalist id=” id ”>
<option value=” value ” />
<option value=” value ” />
where id is the id of the list and the values assigned to the different option elements
provide the suggested entries in the list. To apply a datalist to a text input box, add the
list attribute to the input element as follows
<input name=” name ” list=” id ” />
where id references the id of the data list. For example, to create an input box for
the favDish field that offers a few suggested items, you could enter the following
HTML5 code:
<input name=”favDish” list=”dishes” />
<datalist id=”dishes”>
<option value=”Antipasto Pizza” />
<option value=”Big Kahuna Pizza” />
<option value=”BBQ Chicken Pizza” />
The options in the dishes data list are just suggestions. The customer is not obligated
to accept any options and can type a dish of his or her own choosing. Currently, the
list attribute and the datalist element are supported only by the Firefox and Opera
browsers. Other browsers that encounter this code ignore both the attribute and the ele-
ment, and treat the input box as just another text box.
Creating and Applying a Data List
• To create a data list of possible values, enter the HTML code
<datalist id=” id ”>
<option value=” value ” />
<option value=” value ” />
where the value attribute provides the text of the possible values in the data list.
• To reference the data list from an input control, add the list attribute
<input name=” name ” list=” id ” />
where id references the id of the data list structure.
Search WWH ::

Custom Search