HTML and CSS Reference
In-Depth Information
on the other hand, don't see the
<datalist>
element, and
will instead fall back to showing what they see as a standard
<select>
. They also display the “If other” text and the input ield
that the datalist is attached to.
In other words, browsers that understand
<datalist>
see each
<option>
as being part of the datalist, and see nothing else.
Browsers that don't support
<datalist>
see each
<option>
as
being part of a
<select>
and see the additional text “If other,
please specify,” and the input that is hooked onto the datalist via
the list attribute degrades to a simple text input ield (
Figure 3.10
).
FIguRE 3.10
<datalist>
in Opera (top) and gracefully
degrading in Safari (bottom).
This is an excellent pattern that will become part of your day-to-
day form-coding arsenal—unless the Working Group decides to
take it away from us, see Note!
Like me, this ain't pretty, but it does work (although not so far in
IE10 Platform Preview 2, where it degrades into the select + input)
and it demonstrates how the new features can degrade gracefully.
NoTE
The Working Group
is considering removing
this method of graceful degra-
dation through markup, on the
somewhat shaky grounds that
web authors don't use it much
and it's hard to specify and
implement (what to do about
<script>
elements inside a
<datalist>
?)
If it is removed, we'll note it on
you'll have to rely on scripting to
make
<datalist>
degradable
in older browsers. Which would
be a shame.
The autofocus attribute
The
autofocus
boolean provides a declarative way to focus a
form control when a page is loaded. Previously, a developer had
to write JavaScript that triggered the control's
focus()
. method
onload. Now the browser can do clever things like not actually
focusing the control if the user is already typing elsewhere (a
common problem of old-school JavaScript onload focus scripts).
There should be only one such input ield on a page. From a
usability perspective, this attribute should be used with care. We
recommend only using it on pages that have a form ield as their
central purpose—a search form page, for example.
