HTML and CSS Reference
In-Depth Information
The default effect of clicking the spin arrow is to change the field value by one unit.
You can specify a different amount for the value to change and identify the minimum
and maximum values of the field using the
step
,
min
, and
max
attributes, as follows
<input name=”
name
” type=”number” value=”
value
”
step=”
value
” min=”
value
” max=”
value
” />
where the
value
attribute provides the default field value, the
step
attribute indicates
the amount by which the field value changes when a user clicks the spin arrow, the
min
attribute defines the minimum possible value, and the
max
attribute defines the maxi-
mum possible value of the field.
Creating Spinner Controls and Range Sliders
• To create a spinner control for numeric data, enter the
input
element
<input name=”
name
” type=”number” value=”
value
”
step=”
value
” min=”
value
” max=”
value
” />
where the
value
attribute provides the default field value, the
step
attribute indi-
cates the amount by which the field value changes when a user clicks the spin arrow,
the
min
attribute defines the minimum possible value, and the
max
attribute defines
the maximum possible value of the field.
• To create a range slider control for numeric data, use the following
input
element:
<input name=”
name
” type=”range” value=”
value
”
step=”
value
” min=”
value
” max=”
value
” />
You'll add a new field to the survey form named
ordersPerMonth
that queries cus-
tomers about how often they dine out; you'll set its default value to 1 and set the field
value to range from 0 up to 10 in steps of 1 unit.
To create a
number
data type:
◗
1.
Return to the
survey.htm
file in your text editor.
◗
2.
Directly below the selection list for the
infoSrc
field, insert the following HTML
code (see Figure 6-53):
<label for=”ordersPerMonth”>
How many times do you dine out per month?
</label>
<input name=”ordersPerMonth” id=”ordersPerMonth”
type=”number” value=”1”
min=”0” max=”10” step=”1” />
