6

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?

  • 2
    You could do text and add constraints to only allow numbers. Do any IDs begin with a 0? Typically IDs are text because they aren’t intended to be included in any calculations or involved in any mathematic operations. On the backend, the DBA may store them as numeric since numbers may take less space than text; though, that is contingent on several factors. Go with text and limit the input to numbers only – vol7ron Jul 30 '18 at 17:04
  • 2
    pattern=“[0-9]+” or pattern=“\d+” – vol7ron Jul 30 '18 at 17:06
  • 1
    I updated my answer on this question: I don't agree with Kevin Reid. But rather just as a comment to his reply. I thought it would be better to include it in my own answer as an argument to why my answer would be the correct one. – Muqito Aug 3 '18 at 7:20
  • 1
    is there maybe a way to convert the string-of-numbers (haha!) into a string-of-characters. Like 123456 => LHD ( 12th, 34th, 56th of the alphabet [modulo 26]) ... or anyway reach something like "AQD3 – ZZ4Y – 9CBA". Less prone to typos with the blocking and you need more than digits ;-) – flowtron Aug 3 '18 at 8:13
5

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.

  • 3
    my 2¢ worth: far be it for me to disagree with WHATWG but I see one very good reason even a just-digits input should be type=number … on touch devices you will get a numbers-only keyboard. That's UX! – flowtron Aug 3 '18 at 8:07
  • @flowtron The browser makers could recognize that the pattern matches only digits. And they'll be more likely to do this if it is used commonly. This may not be immediately best UX but it's a better long-term state. – Kevin Reid Aug 3 '18 at 14:52
  • 1
    While this has an authority support, in real life Muqito’s answer is probably the best for a variety of reasons. One of those cases when opposite answers are both correct! – Devin Aug 3 '18 at 15:50
8

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.

  • OP says ID is random, not an incremental table counter at all. – flowtron Aug 3 '18 at 8:09
  • The rule still applies – Muqito Aug 3 '18 at 8:44
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.