What is the correct input type for credit card numbers?

HTML

If you’re trying to do this strictly with HTML, I believe the following is going to get you about as close as is currently possible:

<label for="ccn">Credit Card Number:</label>
<input id="ccn" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" maxlength="19" placeholder="xxxx xxxx xxxx xxxx">
  • inputmode sets the keyboard type (in this case, numeric)
  • pattern enables validation (in this case, numbers and spaces with a length of between 13 and 19) and it helps with keyboard type for browsers that don’t yet support inputmode
  • autocomplete tells browser what should be autocompleted (in this case, a credit card number)
  • maxLength prevents the user from entering more than the set number of characters (in this case, 19, to include numbers and spaces)
  • placeholder gives the user an example (formatting hint)

JavaScript

For a more robust solution, JavaScript is going to be required. And rather than roll your own solution, it’d probably be best to use a battle-tested library. Cleave.js (as you mentioned) is a popular choice.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)