Number Inputs | HTML5 Tutorial pdf

Number Inputs

Problem
You want to present a user with a form to enter a number, for example, to enter the quantity of an item in an order form.
Solution
Use the input element with HTML5 type value of number.
<form>
<p><label>Quantity <input type="number" name="quantity"></label></p>
<p><button type="submit">Submit</button></p>
</form>
Figure:  A number spinner control in Chrome 12.

 Discussion
As you may have guessed, the number input type restricts the value to a valid number a floating point  number, to be specific.
If the user enters a value that is not valid then the user agent warns the user and the form data is not submitted as shown in above Figure.
Some user agents display this form field with a spinner control next to the field, while others do not. On some touch-screen devices, the user agent displays a numeric onscreen keyboard for this field.
For browser support reference on number input type, see below Table.
Table: Number input type support.

User Friendly Input Fields
As always, it’s important to think through the user experience when implementing the number input type.
For example, if you asking for a U.S. Zip Code using the number input type, presenting a spinner control might confuse the user, since its purpose isn’t well known yet. On the other hand, you can’t rely on all browsers displaying a spinner, so take care in crafting instructional text – don’t reference the spinner arrows, in case they’re not there!
Load Mike Taylor’s support test (see http://www.miketaylr.com/code/input-type-attr .html) to determine what level of support a particular browser has for this input type.
If a user agent does not recognize the number input type, it will display a text input field.
Additional Features
The min and max attributes can be used with the number input type to limit the values that can be entered. In addition, you can use the step attribute to specify the amount by which the value should be incremented. In this example, a customer must order in pairs, so the minimum quantity is 2 and the step value is 2 as shown in below Figure.

<form>
<p><label>Quantity (must order in pairs of 2) <input type="number" name="quantity" min="2" max="20" <p><button type="submit">Submit</button></p>
</form>