HTML and CSS Reference
In-Depth Information
Setting
type
to
number
gives you a numeric spin box in conforming browsers:
<p><label>
number:
<input type="number" name="number"></label></p>
When unconstrained, the spin box will be able to move up and down arbitrarily with no
limits. However, it is possible to define allowed values. For example, the
max
attribute can
be set to limit the maximum value,
min
to limit the smallest value, and even
step
to
indicate how values may be modified. For example,
<input type="number" name="number2" min="-5" max="25" step="5">
would create a numeric spin box that ranges from -5 to 25 in increments of 5.
A similar form of control can be created using a
range
control:
<input type="range" name="range" max="100" min="1" step="5">
This control presents itself as a slider, which so far has a varied appearance in browsers:
Like the number picker, the
min
,
max
, and
step
attributes all can be set to limit values:
<p><label>
range (1-100 step 5):
<input type="range" name="range" max="100" min="1" step="5">
</label></p>
<p><label>
range (-1000-1000 step 100):
<input type="range" name="range" max="1000" min="-1000" step="100">
</label></p>
It is also possible to further define semantic restrictions by setting an
<input>
tag's
type
attribute to
tel
,
email
, or
url
:
<p><label>
Telephone Number:
<input type="tel" name="telno"></label></p>
<p><label>
Email:
<input type="email" name="email"></label></p>
<p><label>
URL:
<input type="url" name="url"></label></p>
A browser may then specify some indications of the appropriate data type:
