HTML 5 Number Spinner Control

The HTML 5 "spinner" or number input control provides an input for entering a number and also allow users to click up and down arrows to select a number.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spinner Control in HTML5 by DevCurry.com</title>
</head>
<body>
   <form>
        <label for="age">
            I am   
            <input type="number" name="age" id="age"
                min="18" max="120" step="1" value="18">
             years old
        </label>
    </form>
</body>
</html>

What I like in the number input control is that it is a combination of text and range. A user can enter values directly just like they do in a textbox, but at the same time is restricted to enter only numerical values in a range, like a range control.

The min and max attributes, allow you to enter range of values. The step attribute sets the value increment and the value attribute lets you specify the default value of the control.

The control renders differently in different browsers and in tablets, the behavior changes. Here’s how it looks in Chrome 13.

Html 5 Number control

Browser support for the HTML 5 Number Spinner Control

I have tested this example on the latest browsers including IE 9, Chrome 13, Firefox 6, Safari 5. Here’s a list of what is supported and what is not. Hopefully all browsers will sooner or later add support for this control!

HTML 5 number control

Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

1 comment:

Unknown said...

Thanks for the helpful article. Next time, please consider using colors (red and green) in the x and √ table.