In traditional XHTML, there are only a few input options for entering numbers in a form:

1. if the expected range of possible numbers entered is high (say 1 – 100), use an <input type=“text” /> and try to validate the entry.

2. If the range is moderate (1 – 12), use a drop-down menu with pre-assigned options.

3. If the range is low (0 – 2) use radio buttons.

Traditionally this limited set of options have been enhanced with JavaScript to create a date picker, for example.  With the new numeric inputs introduced by HTML5, the same features are built into the browser.

Number input

Let’s start with the simplest of these: the number input.

1. <input type=“number” />

Nothing could be simpler: a compatible browser or device will understand that a number should be entered into the field, and (ideally) limit user input to numerals. However, that doesn’t provide a range of possible numbers:

1. <label for=“boys” accesskey=“b”>
2. How many boys are brought to the yard by your milkshake?
3. </label>
4. <input name=“boys” id=“boys” type=“number” min=“0”
5. max=“6” value=“3” maxlength=“1” size=“3” />

In a compatible browser, this produces a “spinner” control, familiar to anyone who uses software that requires ranged numeric inputs, such as Autodesk 3DS Max. You can also choose to increment the value by certain amounts by using the step attribute (for example, step=“2” to produce only even numbers within the input).

range input

Sometimes a spinner is not what’s required; instead, the question is phrased in such a way that a slider is the best interface choice:

1. <input type=“range” name=“slider” id=“slider”
2. min=“0” max=“10” value=“5” />

As a range control does not explicitly show a value, it may be connected to an <output> element, which we will discuss in more detail later:

1. <label>How much do you like me? (0: not at all; 10: a whole lot)</label>
2. <input type=“range” id=“popularity” name=“popularity”
3. min=“0” max=“10” value=“5” />
4. <output onformchange=“value=popularity.value”>5</output>

tel input

Takes a telephone number as an input.

1. <label for=“phone” accesskey=“p”>Phone number:</label>
2. <input name=“phone” id=“phone” type=“tel” maxlength=“11” size=“13” />

date input

Utilized on any number of websites whenever a date is required (a concert, a flight, hotel booking, etc), traditionally generated via JavaScript. <input type=“date” /> creates the same interface in-browser, no JavaScript required. Best supported in Opera as of this writing; other browser’s implementations are improving.

Related input types are: time, date time, datetime-local, day, month, and year.