Numbers as spinboxes

Another take on validating the input from your users, is using the number attribute. There are many situations where you might need the user to pick a number and even though it seems pretty straight forward it’s not. Look at it this way: If I asked you to pick a number, you would might say -5. But I meant a number from 1 to 10. Can you choose 3.75? I’d say you are just being argumentative as you should have known I meant a whole number. As you can see a number is not just a number and normally you have some implied boundaries.

And this is what makes the number attribute so special- the fact that you can control the range of numbers the user can select from, force the choices to be only integers and the step scale factor is set to be 1 by default. When you use the number element it is displayed as a spinbox.

Let’s have a look at the simplest way of using the number input type – The smallest possible value is per default 1, the step scale factor is 1 and there is no maximum – hit the “Try this example" button to see what it looks like:

<form>
<input type="number" required>
<input type="submit" value="Submit Now!">
</form>

Now let’s say you want to limit your users’ choices to a range of 10 to 20. Then we have to use the min (which specifies the minimum acceptable value for this field) and max (which specifies the maximum acceptable value for this field) attributes, and it looks like this:

<form>
<input type="number" min="10" max="20" required>
<input type="submit" value="Submit Now!">
</form>

I said you could control the step scale and this is done using the step attribute. Additionally, you can preset a number – maybe you have an idea that this is the most common number and this way you make it quicker for the user to fill out the form. In the following example I have set the step scale to 2 and the pre-set value is 16 – here is what it looks like:

<form>
<input type="number" min="10" max="20" step="2" value="16" required>
<input type="submit" value="Submit Now!">
</form>

If you try to go beyond the specified range some browsers will grey out the arrows while others just won't allow you to go any further.

What you have learned

• The input type number forces the user to choose nothing but numbers
• The step factor scale is always one and this cannot be changed
• You can set a minimum and a maximum using the min and max attributes
• If your minimum is not an integer, the step factor scale will still be 1 – this means that if you minimum is 2.2 the next option will be 3.4
• You can set the step scale using the step attribute
• You can set a predefined value using the value attribute