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.
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!
Tweet
About The Author
1 comment:
Thanks for the helpful article. Next time, please consider using colors (red and green) in the x and √ table.
Post a Comment