Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Webforms has Web forms have a "number" element that you can use, but did you know that it shouldn't it should not be used for all cases where you want people 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 increment increase and decrement 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 increment increase or decrement 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 - you might reasonably expect a visitor to may increase or decrease the quantities using the arrows.

On the other hand, a "product ID number' field should would be better as a regular text field, because it . It might be a longer number, it doesn't really make sense that you'd want to enter it by scrolling to scroll through the digitsnumbers, and then there is the additional issue that a number element will not preserve leading zeroes when incrementingincreasing/decrementingdecreasing.

Image Removed
Image Removed

One final thing you may want to consider when selecting what type of field to use is You should also consider the keyboard affordances that phone browsers use when the field is selected.

Image Added
Image Added

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]* , and then you will get 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, webforms web forms do not support adding this pattern validation to the number field - technically, it violates the specification, even though Apple uses it to determine which keyboard to show. Perhaps someday webforms will support the "inputmode" attribute, another way to determine keyboards.