HTML5 Tutorial - Input Type : Number

Input Type : Number

In HTML5, you can have a number input field as a spinner which you have up and down arrow at the right of the textbox to increase or decrease the number value. Please see the spinner gallery as below

Spinner Gallery

As of writing, the web browsers that does the job in Windows are Google Chrome and Opera.

BrowsersRender "Number" input as Spinner
IE 9 Beta
Firefox 13
Safari 5✓ (in Mac OS, but not Windows)
Chrome 8
Opera 11

Let's have some real demo so you can touch it by your own self.

<label for="movie">How often you watch movie in week : </label><input id="movie" type="number" value="0"/>

If you are using Google Chrome 8, try input a non number value like "a", "B" ,"?", Chrome won't allow you to do so, but it allows you to input "e"? Why is that so? because "e" can be a part of a floating point number. For example : 5.34 e+12

On the other hand, Opera allows you do input anything as you like to it.

We shall explore some important attributes that we can have in Number Type (<input type="number">) input.

Attributes Descriptions
value Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.
min Obviously, the minimum value you of the number. I should have specified minimum value to 0 for my demo up there as a negative number doesn't make sense for number of movie watched in a week.
max Apprently, this represents the biggest number of the number input.
step Step scale factor, default value is 1 if this attribute is not specified.

Let's have another demo, If you are software company and your software is sold by number of user license, minimum licenses you sell is 5, each increase is 5, maximum licenses per customer you can sell is 30.

<label for="user_lic">Number of user license : </label><input id="user_lic" type="number" min="5" max="30" step="5" value ="5"/>

If you happen to use javascript to increase and decrease the value, here is the solution.

A spinner with relatively tiny up/down arrow might not be very finger friendly for touch screen application. Both iPhone (iOS 4.2) and Android 2.2 web browsers render <input type="number"> as normal textbox but give users a Number keypad for data input.

Screen of iPhone (iOS 4.2) on the left and HTC Desire (Android 2.2) on the right.

number type input in Android and iPhone