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">
<p><label> range (-1000-1000 step 100):
<input type="range" name="range" max="1000" min="-1000" step="100">
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:
Search WWH ::

Custom Search