The community is working on translating this tutorial into Spanish, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
If you are fluent in Spanish, then please help us - just point to any untranslated element inside the article and click the translation button to get started. Or have a look at the current translation status for the Spanish language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
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