text inputs are still best for collecting some numbers on web forms—especially if the user might wish to enter non-numeric formatting characters such as spaces, dashes, letters. Serial numbers and credit card numbers are prime examples.Sometimes when designing a web form, you need to ask the customer a question where their answer will be a number. Now with HTML5, browsers have started supporting a number input field: Sounds like a perfect fit, right?
But wait a minute—are you really sure the “number” you are asking for really is a number? What is a number anyway? If you are rushing to use the HTML5 number input, a number is a “valid floating point number”.
You see there are lots of things we (humans) call “numbers”—but not all of them are valid floating point numbers. Below are 2 problems I have encountered with differing definition of numbers.
Recently I was ordering pizza from dominos on my iPhone. At the payment stage, I had to enter my credit card number. I like to enter it as it appears on my card—with spaces. It is easier to read and check this way. Imagine my surprise when I moved to the next field, and had the first 4 digits formatted as “4,111” and the rest of the digits thrown away. I had to tap out the digits again, and even then it was formatted as “4,111,111,111,111,111”. It worked, but—ugh. Don’t use input type="number" for credit card numbers.
We had a similar situation at work a couple of years back, with ABN. An ABN is always displayed in the format: 53 004 085 616.
Customers could enter their ABN how they wished (including spaces). I was surprised to find the confirmation and receipts screens showing the ABN with the spaces removed, like so: 53004085616. I knew I had not coded the UI that way, and when I raised it as a bug I was told emphatically by a developer that an ABN was a number and that they were now storing it as such and this was how it should be.
There’s some truth in that. But when it comes to how data is presented to end users, the format should be designed for clarity. When there is an existing convention—as there is for ABN—displaying data in that familiar format is best. Happily we resolved the ABN disagreement with a little regexp that put the spaces in for the UI.
Next time you’re working with a number—think about what kind of number it really is.
| Type of number | Suggested HTML5 input type | Why? |
|---|---|---|
| Street address | text |
Examples: 3A, 4/353 |
| Postcode | text |
May contain spaces or letters (varies by country) |
| Phone number | tel |
Specifically for phone numbers |
| ABN | text |
Contains spaces by convention |
| Credit card number | text |
Contains spaces by convention |
| Serial number | text |
Frequently contains letters or spaces |
| Dates | various date and time options |
May contain dashes, slashes, words (month names) |
| other number | number |
might be ok 😉 |
Ben Boyle lives here! 