HTML and CSS Reference
In-Depth Information
<option value="Fawcett City">
<option value="Kandor">
<option value="Mega-City One">
<option value="Neo-Tokyo">
<option value="Platinum Flats">
</datalist>
You can see this control in action in Figure 8-22, taken from Firefox. The
datalist
element isn't widely
supported by browsers yet, but those that don't support it will still get the fully functional, tried-and-true text
input. It's another fine example of progressive enhancement—improving the utility of a simple form control
for those browsers that are capable, but less-capable browsers and devices aren't left out in the cold.
Figure 8-22.
The
datalist
element holds suggested values for the text field, automatically matched to the text
already entered. A user can choose from the list or continue to enter a different value.
Required Attributes
id
: Identifies the
datalist
control so it can be associated with an
input
element by way of a
list
attribute.
Optional Attributes
The
datalist
element doesn't offer any optional attributes apart from the standard global attributes that
apply to all elements.
button
The button element works just like a submit, reset, or button
input
, or even an
input type="image"
—
activating a
button
element (with the click of a mouse or press of a key) will submit or reset the form, or
trigger a scripted response.
The
button
element requires a
type
attribute with a value of
submit
,
reset
, or
button
. However, unlike
the
input
element, a
button
element is not empty; it can contain text or other elements, offering many
more design and semantic options than a void
input
element. In fact, a
button
must
hold some content,
because an empty
button
element will have no default label. And because it contains text or other
elements, a
button
requires an end tag. Web developer Aaron Gustafson gives an informative overview
of the
button
element's usefulness and flexibility in his 2006 article, “Push My Button” (
digital-
web.com/articles/push_my_button/
).
Listing 8-21 shows an example of a
button
element like you might see in a multi-step “wizard” style form.
This button also bears a
formnovalidate
attribute, allowing the form to be submitted without checking for
required fields (controls with
required
attributes) or imposing any formatting rules (for e-mail or URL