Peter Lubbers - Pro HTML 5 Programming

174
CHAPTER 7 ■ USING THE HTML5 FORMS API
gives a convenient way to pick a suitable value for age-restricted material. In the latest Opera browser, it
displays as follows:
Unfortunately, the range input itself doesn’t display a numerical representation of the browser.
Moreover, without one, it is practically impossible for the user to know what the currently selected value
happens to be. To fix this, one can easily add an onchange handler to update a display field based on
changes to the current range value as shown in Listing 7-1.
Listing 7-1. onchange handler to update a display field
function showValue(newVal) {
document.getElementById("ageDisplay").innerHTML = newVal;
}
Age
18
This gives a nice display to our range input, as follows:
Opera and the WebKit-based browsers—Safari and Chrome—have now added support for the type
range element. Firefox support is planned, but not yet scheduled as of this writing. Firefox will fall back
to a simple text element when presented with a range input type.
HERE BE DRAGONS
Brian says: “The phrase ‘Here be dragons’ is said to have been used in history to denote dangerous areas
on maps where unknown perils lurk. The same could be said for the following form elements. Although
they are specified, and have been for lengths of time now, most are lacking in actual implementation.
As such, expect large changes between now and the time that browser developers have had a chance to
play with the designs, smooth the rough edges, and respond with feedback and changes. Rather than rely
on the following components as inevitable, take them as a sign of the direction in which HTML5 forms are
moving. If you attempt to use them today, the risk you take is your own…”
Additional form elements which are planned, but not widely supported yet include the ones listed in
Table 7-3: