Not all numbers are alike – Bad Habits & Enhancements

HTML5 brought many new input types to modern web browsers. Joining your regular text, password, radio, checkbox, file and button inputs were email, number and date types to name a few.

The number field is one of those fields that i’ve seen people truly misunderstand and use improperly from the day HTML5 started taking off.

This article is about number fields but it rarely uses the number type.

The number type is probably the wrong choice

I’ve seen people use the <input type=number /> input for:

• Telephone number fields
• Credit card number fields
• Expiry date fields
• CVC fields
• Zip code fields

Basically I’ve seen this field type used for any field where the developer believes the only type of input should be a number.

The problem is that’s not what the number field is for. The number field is for input of a – ahem – number.

A number input is different from numerical input

Although technically a telephone number is a number (clue is in the name) it’s not a number in the same sense that a quantity is. We’d classify quantity as an integer.

A telephone number can have spaces, hyphens, brackets, pluses and they can start with a zero. Telephone numbers don’t have decimals places in them. A telephone number is closer to a string than a number – luckily telephone number fields are so common place that there is a field type tel which handles it for you.

If you need to ask for a quantity or measurements then the number field is probably perfect for you. :Casually ignores imperial fractions:

I want to display the numerical keyboard for mobile users

Let’s be honest. You’ve thought to yourself “I want to display the numerical keyboard for mobile users” and it was the quickest solution you came up with.

It’s the quickest way to do it. But it’s not the only way to do it. It’s certainly the wrong way to do it.

What should I use instead then?

The solution you chose depends on what your field is trying to collect. So let’s cover some of the examples I mentioned earlier in this article.

Telephone number

You may not be aware but there is a tel field type in HTML5 that is specifically for telephone numbers. On mobile devices it will display the proper keyboard for inputting telephone numbers.

<input type="tel" />

So that’s an easy solution. Easier than using type=number really.

Credit card number field

There is no credit number field yet, sadly, but the type=text input is the best choice for collecting credit card numbers – as long as you specify an input pattern.

Input patterns are hints to the browser on the type of input to expect and accept for validation. Patterns are passed as Javascript regular expressions which means there are countless snippets out there for most field types.

A credit card field consists of just numbers so for this field we can pass the pattern of \d* which will trigger the number keyboard (slightly different from tel) for mobile users.

<input type="text" pattern="\d*" />

Bonus: Boost your credit card field UX

Go the extra mile with your credit card field and use a javascript library like Cleave which not only applies the patterns automatically but it formats the input as you type.

For users on desktop with a normal keyboard it’s not uncommon for them to format the card number exactly as it appears on the card. With Cleave this means the credit card number is formatted like the front of the card, whether the user inputs spaces or not.

Expiry date fields

Expiry dates are tricky fields to get right. Assuming you’re following the advice of using a text field instead of a select dropdown (I advise to use a text field always) then how you display those fields affects the usability.

For this simple example let’s assume you have an expiry date that is split in to two parts.

<input type="text" pattern="\d*" limit="2" placeholder="MM" />
/
<input type="text" pattern="\d*" limit="2" placeholder="YY" />

Using the same number pattern as the credit card field will bring up the number keypad.

If you use a single field for your expiry date (better for the user) you’ll need to avoid setting a pattern because it’s an expectation that a customer would want to use a slash to separate the month and year. Instead consider using something like Cleave.js to improve the usability of your expiry date field.

CVC field

Use the number pattern mentioned previously for a CVC field. It accepts just numbers.

<input type="text" pattern="\d*" placeholder="•••" />

Zip code field

Apple in their documentation suggest the following code for a zip code field.

Remember not to apply this same pattern to fields accepting a UK post code.

<input type="text" pattern="[0-9]*" placeholder="Example: 90210" />

Quantity field

The majority of my career has been spent on eCommerce website and this is a fairly common field to need. The quantity field is the perfect example of a true number field and it’s a field that takes advantage of the UX benefits that come with it.

<input type="number" min="1" step="1" value="1" />

The number field gives you controls to increase or decrease the value, it lets you set the minimum number and the amount at which it increases or decreases. In some browsers it even works with the keyboard arrow keys.

The article that keeps on giving

Inputs can be tricky business and that’s the whole point in this series of articles. There are some great frameworks and libraries out there to help make your fields as usable as possible.

Cleave.js

I’ve mentioned this a few times in this article and it’s because it’s a fantastic library focused entirely on the <input /> and improving usability.

Cleave can be used to properly display the format of telephone numbers, credit cards, dates, times and custom formats too. With just a few lines of code you can really improve the usability of inputs.

Apple Managing the Keyboard

Apple has some of the best documentation online and this one covers the triggering of the correct keyboard really well.

MDN

When in doubt consult the MDN documentation. It’s packed full of information and even lists browser support for input types.