HTML and CSS Reference
In-Depth Information
allowed date/time value. Also, the attribute step can be added to set the amount a date/
time field can be moved by. For instance, for the input types involving time ( time ,
datetime , and datetime-local ), there is a default step of 60 seconds—meaning
each click of the control to advance the value will move it 1 minute forward (or back-
ward). For the input types that include time, the step attribute is expressed in seconds,
so by adding step="120" , the default value would be changed to 2 minutes (60
seconds multiplied by two) instead of 1 minute. The date , week , and month input
types have larger units of measurement and have default step values of 1 day, 1 week,
and 1 month, respectively. For example, the following code snippet would provide a
control that would allow the selection of every other week (by setting the step to 2
weeks) and would be limited to dates during the (northern hemisphere) summer:
<input type="week" name="event" step="2" min="2011-W25"
max="2011-W38" />
Numerical inputs: number and range
The number input type does what you'd expect—it handles numerical input. In sup-
porting browsers, the appearance is a stepper control like that of the time input type
( Figure 4-12 ) . As with the date/time controls, the min and max attributes can be used
to confine the range of possible numbers within a range. Also, the step attribute can
be used to increment or decrement the value by a certain amount (the default is 1). Frac-
tional values can be used if the min and/or step attributes are set to a decimal value.
Figure 4-12. A number input type with a value being entered
In situations where displaying the actual value of the number isn't of utmost import-
ance, there is the range input type ( Figure 4-13 ) , which displays a draggable slider
between a minimum and maximum value (0 and 100 by default). The min , max , and
step attributes can be set on this type as well.
Figure 4-13. By default the range does not show the value it is currently at.
Search WWH ::

Custom Search