<input type="number"> or <input type="text"> for entering an ID?

Question

My website has a form with an input box to enter a long, random, numeric ID. Should it be a text input or a number input?

The problem with <input type="number"> is that it has useless up/down spinner arrows. ID numbers are long and random, so who would ever need to increment/decrement the number?

But <input type="text"> is bad because it lets users enter non-digit characters.

Which is better?

Answer 1

The WHATWG HTML specification has a note about exactly this situation. According to that note, this is not an appropriate use of input type="number".

The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=number is to consider whether it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down" arrows). Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit incorrect. So it would not make sense for the user to select a credit card number using "up" and "down" buttons. When a spinbox interface is not appropriate, type=text is probably the right choice (possibly with a pattern attribute).

Use of the pattern attribute to specify only digits would be like pattern="[0-9]+", or pattern="[0-9]{32}" if your IDs are exactly 32 digits.

Answer 2

I would say use type="number"

and then remove spinner with

-webkit-appearance: none;
-moz-appearance:textfield;

References: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

This is because on mobile devices you would use in the built-in "numpad".

--

EDIT

I don't agree with Kevin Reid's answer; and I'll tell you why:

If you need a long number for let's say a credit card; you would most likely want to format it with spaces and stuff for readability reasons anyway. Same with phone numbers. A lot of people write their number as they speak with "pauses" in between numbers. Then when you save it; you could save both how the number is formatted and also the number without any spaces, hashtags, dashes or anything like that.

Then ofc. you would want to input text.

In this question OP asked were talking about an ID

Then without a doubt there would be a type="number". He only wanted to get rid of the spinners in this case.

Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit incorrect. So it would not make sense for the user to select a credit card number using "up" and "down" buttons.

This would make sense since a credit card number shall remain private at pretty much all cost. But I don't think it shall apply on a member id.

Answer 3

Number.

For the simple reason, that mobile devices will show you a numeric keyboard making it much easier to type the ID.

Pattern validation does not provide you with a custom keyboard view, and in most browsers only generates error messages instead of enforcing that you can only type numbers.