HTML and CSS Reference
In-Depth Information
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.
The autofocus attribute
The
autofocus
Boolean provides a declarative way to focus a
form control during page load. Previously, a developer needed
to write JavaScript using
control.focus()
. The new way allows
the browser to do clever things like not actually focusing the
control if the user is already typing elsewhere (a common prob-
lem of old-school JavaScript onload focus scripts).
There should only be one such input fi eld 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 fi eld as their
central purpose—a search form, for example.
The placeholder attribute
A usability trick employed regularly by developers is placing text
in an input fi eld as a hint for the user, removing the text when
the user focuses on the fi eld, and restoring the text when focus
leaves the fi eld. This used to require JavaScript. However, it can
now be done declaratively with the
placeholder
attribute. The
specifi cation says “For a longer hint or other advisory text, the
title
attribute is more appropriate.”
When browsers need a helping hand
With older—and even some newer—browsers, some of these features aren't available natively. This
isn't such a problem, though, as most of the new HTML5 features can be patched using JavaScript (or
other technologies, like Flash and Silverlight) to bring the browser's support capability up to speed. This
isn't graceful degradation nor progressive enhancement; it's something else. Something my colleagues
and I are calling polyfi lling, whereby we rely on native functionality in our code and then fi ll the gaps in
support using an external library. That library may be generic or it may be specifi c. For example, if you
want to make use of
autofocus
or the
placeholder
attribute, you can include a small JavaScript
library, and all the current browsers now support these two attributes, ranging from IE6 to Firefox 3.6
