HTML and CSS Reference
In-Depth Information
input type="range"
A range input generates a slider widget, useful for entering numbers where the precise value isn't
important. The default range is 0 to 100, but you can define your own range with the optional
min
and
max
attributes, including negative numbers and decimals. Like a number input, a range control also accepts a
step
attribute to specify the incremental value (the default step is 1 if the attribute is missing).
Moving the slider handle along the path automatically changes the control's value, but the user won't
necessarily see the actual number the slider represents—hence this control is best for approximate
numbers or estimates, not for precise values. In left-to-right languages, sliding the handle to the left
decreases the value and sliding it to the right increases it. Right-to-left languages reverse the direction.
Similar slider controls have been seen on the Web for years, but they always relied on JavaScript to
render the widget and pass a value into a separate field. The new
input type="range"
in HTML5 brings
this functionality to the masses without the need for fancy scripts or heavy code libraries.
Listing 8-9 shows an example of a range input, including
min
and
max
attributes. Omitting the
step
attribute allows this control to fall back to the default step value (1); the control's value will be a positive
whole number in the range of 0 to 10.
Listing 8-9.
A range input lets users enter an approximate numeric value within a given range
<p><label for="power">Indicate your power level</label>
<input type="range" id="power" name="power" min="0" max="10"></p>
At the time we're writing this, Opera, Safari, and Chrome all support range inputs, as will Internet Explorer
10 (which might be out by the time you read this). Firefox hasn't implemented range inputs yet, but
hopefully will soon. Meanwhile, non-supporting and older browsers still fall back to a regular text field, and
you might opt to provide a JavaScript-based slider interface for those browsers that don't provide a native
slider of their own.
Browsers that do fully support range inputs will render a slider widget like the one you see in Figure 8-11,
taken from Opera on OS X (other browsers and platforms will look a bit different). The rendered slider isn't
very susceptible to CSS; you can specify a width with the
width
property, but not much else. A browser
will automatically place the slider handle in the middle of the range, indicating a default mid-range value.
You can specify your own initial value with the
value
attribute.
Figure 8-11.
Opera renders range inputs as a slider widget. Sliders may look different in other browsers.
input type="checkbox"
A checkbox control is a choice toggle in the form of a small square filled with a check mark (or sometimes
an x) when the control is selected. Use checkboxes when several options are available and more than one
can be selected, in the sense of “check all that apply,” or to represent a single decisive action, like “check
this box to accept the terms.”
