Input fields - Is <input type phone> more user friendly for credit cards than <input type number>?

Question

Basically this question, but with more usability focus:
https://stackoverflow.com/questions/48534229/what-is-the-correct-input-type-for-credit-card-numbers

---

So we have these two general keyboard layouts (at least that's how they look on my phone).
One is <input type=number> and the other <input type=tel>. 

   

Now by the logic they were designed, you would use the number one for credit cards.

But I'm wondering, aren't the buttons on <input type=tel> much easier to hit for a field where you only need numbers? It feels like all the extra symbols on <input type=number> are just cluttering the view, you can't use them for this field anyway.

Now the questions are:
Would you consider this a better user experience, even though we'd be using the "wrong" format?
What about possible drawbacks, would this possibly hinder the user in some way?

Answer 1

The fields should be configured in a way that directly relates to what data goes into it.

So, in this case, while it might be slightly easier to input the numbers with the tel format, that's not what the data actually is. You're breaking syntax rules. This has implications on accessibility, among other things. You don't want a screenreader user being informed that the field is a Credit Card field (by the label) but then being told to enter in a telephone number in the field. That's confusing. Not only during the entering of the data but also when the user is reviewing what they've entered.

Also, you can't be 100% sure that all the devices that the page is being accessed on will interpret the Tel in that format. They may end up defaulting to standard text input keyboard.

Keep the syntax correct for the data.

Answer 2

I find that keyboard type tel is much more convienient for users because it is focused on numbers in their big keys layout. It is also (on Apple) resembles the numeric keypad seen everywhere. It is true that accessibility has a role here and syntax is important but I believe you can find a solution for it.

I found this —> “ Using the pattern attribute, pattern=”[0-9]*”, with the number input type will display the 10-digit numeric keypad similar to the tel keypad“

I like to add this keyboard layout to a credit card masked input field so the user focuses on numbers and no other symbols.