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
Search WWH ::




Custom Search