Chapter #13. Use Numeric Entry Fields for Precise Integers

If you're trying to get an integer (a whole number) from a user—for example the number of widgets they want to order or the number of days an event runs for—it makes no sense to offer them a free text input field where they can enter "a few" or ""A numeric entry field in HTML is:

<input type="number">

This will display slightly differently on different devicesand that's the whole point. By adapting to the control system of the client's device, the user gets simpler entry and makes fewer mistakes. You also get fewer emoji in your database.

Of course, a huge benefit here is that this will improve your form conversion rates, by giving users on both desktop and mobile a quick, painless way to enter numbers into forms. Users abandon forms because they're too long, ask for too many details or because it's difficult to enter information into the form.