Web form number element
- Charlotte Armstrong
- Katie McElroy
- Wardah Ur-Rehman
- Ashley Walls
Web forms have a "number" element that you can use, but it should not be used for all cases where you want users to enter a number (Hat tip to this GOV.UK article.) In most browsers, the number element has arrow buttons that allow you to increase and decrease the entered number. You can also change the number using the up and down arrow keys.
These affordances, along with an issue where browsers won't properly increase or decrease the number if it has too many digits, mean that the number element should only be used in limited use cases, where the number will never be too long and it makes sense to be able to scroll through numbers.
For example, a "quantity" field is a good use case for the number element - a visitor may increase or decrease the quantities using the arrows.
On the other hand, a "product ID number' field would be better as a text field. It might be a longer number, it doesn't make sense to scroll through the numbers, and a number element will not preserve leading zeroes when increasing/decreasing.
You should also consider the keyboard affordances that phone browsers use when the field is selected.
On an iPhone, the keyboard that appears when a number field is clicked does default to include the number keys, but it allows for additional characters besides numbers.
If you use a text field, by default you will see the full keyboard, but you can set the field to use the pattern [0-9]* to provide a keyboard that allows only numbers.
When using this pattern, it is usually a good idea to add a custom message that will be shown to "real" keyboard users if they enter invalid characters and try to submit the form.
Unfortunately, web forms do not support adding this pattern validation to the number field.