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>
<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
http://adactio.com/journal/4272/
(reproduced with his
permission):
<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>
<option>Other</option>
</select>
If other, please specify:
</datalist>
<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,
