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'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Number picker</title>
</head>
<body>
<form>
    <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'/>
</form>
</body>
</html>

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

chrome_number

Here for Safari.  It is supported.

safari_number

Here is Mozilla.  Not supported

mozilla_number

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

ie_number

 

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

Leave a comment

Leave a Reply