HTML and CSS Reference
In-Depth Information
Trouble?
Depending on your browser, you might not see spin arrows next to the
input box.
◗
6.
If they're displayed in your browser, click the
up
and
down spin arrows
to verify
that you can increase and decrease the value in the input box by 1 unit, and that
the field value is limited to the range 0 to 10.
Browsers that do not support the
number
data type also ignore the
step
,
min
, and
max
attributes, so they have no effect in those browsers and the input box is treated as just
another text box.
Specifying a Numeric Range with the
range
Data Type
Recall that Alice also wants to give customers the ability to rate Red Ball Pizza service
and food quality on a numeric scale from 0 to 10. To describe this set of numbers, you
can use the
range
data type
<input name=”
name
” type=”range” value=”
value
”
min=”
value
” max=”
value
” step=”
value
” />
where
name
is the name of the data field, the
value
attribute provides the default field
value, the
min
attribute provides the minimum possible value, the
max
attribute provides
the maximum value, and the
step
value provides the size of the steps between the
minimum and maximum. For example, the following HTML5 code creates a range box
for the
saturation
field that covers a range of values from 0 to 100 in steps of 5 with a
default value of 50:
<input name=”saturation” type=”range” value=”50”
min=”0” max=”100” step=”5” />
The
range
data type is rendered differently from the
number
data type. Rather than
a spin box, the control object is a slider in which the data value is selected by sliding a
marker horizontally across a bar. Currently, the Opera, Safari, and Chrome browsers sup-
port the
range
data type while the Firefox and Internet Explorer browsers do not, treating
range boxes as text boxes designed for simple text input.
You'll create a range slider now for the
serviceRating
and
qualityRating
fields,
which are designed to record the customer's rating of Red Ball Pizza's service and food
quality.
To create the two range boxes:
◗
1.
Return to the
survey.htm
file in your text editor.
◗
2.
Directly above the label for the
textarea
element, insert the following code as
shown in Figure 6-56:
<label>Rate the overall service<br />
(0 = poor; 10 = great)</label>
<input name=”service” id=”service” type=”range” value=”5”
min=”0” max=”10” step=”1” />
<label>Rate the food quality<br />
(0 = poor; 10 = great)</label>
<input name=”quality” id=”quality” type=”range” value=”5”
min=”0” max=”10” step=”1” />
