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




About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 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.