credit card form “best practices”

Most of us have written HTML forms which accept credit card details. And most of them have been, well…, bad. I say this because most of us and even the big players out there like Visa and Apple and Microsoft and Google don’t even do this right yet.

Portable Devices

Almost everyone’s credit card forms now work well enough for desktop computers but they work terribly for smartphones and iPads (iOS). The reason is that these portables don’t include a full keyboard—what they usually include is an onscreen keyboard that has to toggle back and forth between characters and numbers. And this is where almost all coders make a mistake because they haven’t tested this on other devices.

Card Number <input type="text" name="cc_number" size="16"> (omit hyphens)
Exp. Month <input type="text" name="cc_month" size="2"> (MM)

This type of interface would look fine on a desktop computer since you don’t have to shift the keyboard to get to numbers. But this isn’t the case for an iPad or an iPhone, for example.

In this example website you would think that Visa has enough money to pay for some marketing people who would provide an excellent experience for all their users.

Screen Shot 2016-08-30 at 4.35.56 PM

What happens though when you visit this site using an iPad and start to fill it out? Notice that every field here expects numbers throughout and yet it defaults to the iPad’s character-based keyboard.

<input class="noBorder margin10" name="cardNumber" id="card" size="14" maxlength="16" autocomplete="off" type="text">

The problem here is that type="text". What you’re expected to type in is a number in all of these fields. If we—as the HTML coder—can select the right type then the user won’t have to toggle back and forth. As it is, an iPad user of this website must:

  1. toggle their keyboard to numeric
  2. type in the card number
  3. touch the month field
  4. toggle their keyboard to numeric
  5. type in the two-digit month
  6. touch the year field
  7. toggle their keyboard to numeric
  8. type in the two-digit year
  9. touch the security code field
  10. toggle their keyboard to numeric
  11. type in the three-digit security code
  12. touch the Go button

Obviously, nobody at Visa has ever used this on their iPhone or their iPad. Each of the items in red above are unnecessary and cumbersome for the user and makes for an ugly design.

HTML Input Types

Here is a list of supported HTML input types. Those that are new in HTML5 are marked with an asterisk.

  • text
  • password
  • submit
  • reset
  • color*
  • date*
  • datetime*
  • datetime-local*
  • email*
  • month*
  • number*
  • range*
  • search*
  • tel*
  • time*
  • url*
  • week*

Although you can use the type="number" option for a credit card form like this I have successfully used the type="tel" which works out much better.

Tel, For the Win!

Using the type="tel" option for each of the former text fields would completely change up the Vanilla Visa website’s HTML form. Older browsers would gracefully default back to type="text" and it would behave as it does now. Newer browsers, especially those on portables, would display the classic telephone keypad style of ten numbers which you may then input into the form.

Screen Shot 2016-08-30 at 5.02.32 PM

What’s sad is that on Apple’s own website they also haven’t figured this out yet and they’re the ones who created iOS and should know better.