HTML and CSS Reference
If an exact number isn't necessary, you can
use a range control. In the browser, this
renders as a slider:
<input type="range" min="1"
As you can see, the exact value of the range input isn't clearly visible.
In practice, you might use it for large numbers where accuracy isn't
important. As with the number control, you can specify a step value:
<input type="range" min="0" max="1000" value="20" step="20">
If you want to use range for a numeric input, the best approach is to
either label the high and low values in your HTML or provide some
other user feedback when the control is adjusted—perhaps with an
<output> element (see the section "Elements for user feedback'').
In the meantime, let's move on to dates and times.
Create a simple date input like this:
In its unexpanded state (top), it looks
similar to a <select> element. But if you
activate the control, a date picker pops
The value returned from the date control,
and any default value you want to set, are
in the format yyyy-mm-dd . Using this
standard ordering prevents any confu-
sion relating to date formats in different
What the date picker looks like is
left up to the browser. Currently
there's no way to style it through CSS.