HTML and CSS Reference
In-Depth Information
Figure 6-6
An input element with the type search, as displayed in Google Chrome on Mac OS X.
Ranges
The
range
type is used to collect a numeric value from a user that must be between a minimum and maximum
value; browsers will display a slider to help users input this value. Before HTML5 introduced the
range
type, creat-
ing a slider to collect a value from a user involved writing some fairly fancy JavaScript that tended to be a bit of a
pain.
Pro Tip: Displaying Recent Searches
If you add a
results
attribute to a
search
input element, WebKit-based browsers (Google Chrome and Safari)
will display a small magnifying glass in the input box. If the user clicks on this it will display her recent searches.
The value that you set in the
results
attribute tells the browser how many recent searches to display.
<input type=”search” results=”5”>
The
results
attribute is not officially part of the HTML5 specification, but it is an example of an instance when a
browser vendor will implement a new feature that will likely be added to the specification in the future.
The default range scale is between 0 and 100; however, you can change this using the
max
,
min
, and
step
attrib-
utes.
Figure 6-7 shows the interactive slider displayed to users.
Figure 6-7
An input element with the type range, as displayed in Google Chrome.
Here is an example of a basic
<input>
element with the type
range
that specifies a default scale of 0 to 1 with a
step of 0.01 (the minimum increment between values).
<input
type="range" min="0" max="1" step="0.01">
The problem with range sliders in their default state is that users cannot actually see the value that they are selecting.
However, range sliders can be very useful for creating features like seek bars and volume controls. In Chapter 11 you
will use range sliders when creating custom controls for a video.
