HTML5: Number picker

This entry is part 22 of 34 in the series HTML5

Number picker can be a handy control to allow users to select a specific number.

To use number picker, we use input type=’number’.

<input min='0' max='10' step='1' required type='number' id='num_id' name='number'/>

It accepts only numbers and it allows min, max, and step attributes so you can
limit the number range.

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title> Number picker</title>
    <label for='number_id'>Pick A Number</label>
    <input min='0' max='10' step='1' required type='number' id='number_id' name='number'/>
    <input type='submit' value='Go'/>

The screenhost here is for Chrome implementation, it is supported in Chrome.


Here for Safari.  It is supported.


Here is Mozilla.  Not supported


IE.  Supported.  It will prompt that you need to enter a number between a range.



Series Navigation<< HTML5: Date and time implementions in different browsers
HTML5: Create a slider using range >>

Leave a comment

Leave a Reply