title: What is the correct input type for credit card numbers?
body: <p><strong>TLDR:</strong> 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</p>
  
  <hr>
  
  <p>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:</p>
  
  <p><strong>type=text</strong></p>
  
  <ul>
  <li>Able to mask easily with various libraries such as cleave.js or set maxLength attribute</li>
  <li>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)</li>
  </ul>
  
  <p><strong>type=number</strong></p>
  
  <ul>
  <li>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)</li>
  </ul>
  
  <p><strong>type=tel</strong></p>
  
  <ul>
  <li>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! </li>
  </ul>
  
  <p>These are all the types that came to mind. If anyone has any other recommendations, please let me know!</p>