HTML and CSS Reference
In-Depth Information
The list is contained in a new <datalist> element, the id of
which is referenced in the value of the list attribute:
<input id=form-person-title type=text list=mylist>
<datalist id=mylist>
<option label=Mr value=Mr>
<option label=Ms value=Ms>
<option label=Prof value=”Mad Professor”>
<datalist> has no rendering of its own, but instead shows up
as values in a select-like field.
The previous example uses type=text to allow free-form input,
but you can use <datalist> with url and email .
Many have asked why the <input>/<datalist> pair isn't com-
bined into a single new element like <select> is. The answer lies
with backwards compatibility: the <input>/<datalist> pairing
degrades to <input type=text> in legacy browsers, so the user
can at least enter something, and so you can easily fake the full
implementation with JavaScript for those browsers as well.
Jeremy Keith has a good example of this backwards compat-
ibility at (reproduced with his
<label for=”source”>How did you hear about us?</label>
<datalist id=”sources”>
<select name=”source”>
<option>please choose...</option>
<option value=”Television”>Television</option>
<option value=”Radio”>Radio</option>
<option value=”Newspaper”>Newspaper</option>
If other, please specify:
<input id=”source” name=”source” list=”sources”>
Notice how we've wrapped the <option> elements in an addi-
tional <select> , making the contents of the datalist mimic the
markup of an old-school dropdown selection. Browsers that
understand <datalist> will ignore anything other than <option>
elements, so the nested <select> is invisible to them. The text “If
other, please specify” is also ignored. Nonconforming browsers,
Search WWH ::

Custom Search