Search code examples
htmlformsgoogle-chrome

What is the correct input type for credit card numbers?

TLDR: Which input type can utilize the mobile numeric keyboards AND implement masking with spaces injected and a max limit for CVV and Credit Card inputs, such as: XXXX XXXX XXXX XXXX

When building forms, I have seen a varied degree of consistency surrounding the correct input type for credit cards. Here are my discovered pros and cons for each:

type=text

  • Able to mask easily with various libraries such as cleave.js or set maxLength attribute
  • Mobile users do not receive numeric-only keyboard, unless setting range to [0-9] (Only iOS users will get this experience, leaving Android users with full keyboard)

type=number

  • Proper keyboard shown on iOS and Android but unwanted characters can be entered and no maxLength can be set. Min and Max do not limit users from inputting more than 16 characters but do provide error messages when over the max. *Note, this input type is basically ruled out due to leading 0's being deleted. (Unacceptable for CVV's)

type=tel

  • Able to properly mask and is utilized all over the place, BUT may have unknown impacts on accessibility programs and autofillers. If anyone can provide clarification on the potential side effects of using this input type, that would be awesome!

These are all the types that came to mind. If anyone has any other recommendations, please let me know!

Solution

  • 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:

    <form>
  <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" required>

  <button>Submit</button>
</form>

    • 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.