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
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” />
Search WWH ::

Custom Search