Peter Lubbers - Pro HTML 5 Programming

178
CHAPTER 7 ■ USING THE HTML5 FORMS API
■ Note Autofocus can annoy users if they are not expecting a focus change. Many users utilize keystrokes for
navigation, and switching focus to a form control subverts that ability. Use it only when it is a given that a form
control should take all default keys.
The list Attribute and the datalist Element
The list attribute and datalist element combine to let a developer specify a list of possible values for
an input. To use this combination:
1. Create a datalist element in your document with its id set to a unique value.
The datalist can be located anywhere in the document.
2. Populate the datalist with as many option elements as needed to represent
the full set of suggestions for values of a control. For example, a datalist
representing e-mail contacts should contain all of the contact e-mail addresses
as individual option children.
3. Link the input element to the datalist by setting the list attribute to a value
which is the id of the associated datalist.
On a supporting browser, like Opera, this produces a customized list control like the following:
The min and max Attributes
As seen before in our example for , the min and max attributes allow a numerical
input to be constrained to minimum and maximum values. One, both, or neither of these attributes can
be provided as necessary, and the input control should adjust accordingly to increase or decrease the
range of acceptable values. For example, to create a range control representing a level of confidence in
ability from zero% to 100%, the following code could be used as follows: