Credit card, bank account numbers in HTML5 forms

It’s not appropriate to use input type="number" for strings of digits such as bank account numbers or credit card numbers.

input type="number" is really for quantities, or real numbers. It’s implemented by Opera, Chrome and Safari as a spinner field (see the “shoesize” field in my HTML5 Forms Demo) – which isn’t a terribly good way to input a 16 digit number.

Although credit card and bank account numbers are colloquially called “numbers”, they’re really strings of digits – unlike real numbers, leading zeros are significant, and you wouldn’t expect to perform any arithmetic operations on them.

Therefore, the correct way to mark up forms that expect credit card/ bank account details is with input type="text". If you want magical HTML5 client-side validation, add pattern="…", with the value of pattern being a regular expression that describes the string.

In The Future™ you’ll be able to restrict such fields to numeric-only input, as a hint to the user, with the newly-specified inputmode=”numeric” attribute:

Numeric input, including keys for the digits 0 to 9, the user’s preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers.

Also in The Future™, you can help the browser autofill such a field by telling it that you’re expecting a credit card number and, if it has one setup by the user, it can autocomplete using the newly-specified autocomplete=”cc-number”.

So a full credit card number would be <input type="text" pattern="…" inputmode="numeric" autocomplete="cc-number">

(Added 27 August 2012:) Perhaps not so far in the future: Mozilla have just added inputmode support, and Chrome implements autocomplete with a vendor prefix.

(The WHATWG wiki has a good explanation of the rationale behind autocomplete types, NB: this text is from the original proposal; I haven’t checked if everything it proposed actually made it into the spec.)

7 Responses to “ Credit card, bank account numbers in HTML5 forms ”

Comment by Denis Sokolov

Also in The Future™, you can help the browser autofill such a field by telling it that you’re expecting a credit card number and, if it has one setup by the user, it can autocomplete using the newly-specified autocomplete=”cc-number”.

Or you could use name=Ecom_Payment_Card_Number, as per RFC 3106.

Comment by bruce

Denis

I’m no expert in RFC 3106, but I note that it requires using the name attribute. The autocomplate wiki says

“RFC 3106 requires websites to conform to a set of input naming standards, effectively co-opting the name attribute — which has other, sometimes conflicting, uses. For existing websites, changing the name attribute is an onerous task: Since this attribute serves as a key for parsing submitted form data, updating a field’s name requires coordinated front-end and back-end changes. Even for new websites, the name attribute might have back-end restrictions conflicting with RFC 3106. For example, the SourceForge registration page appears to use the attribute as a way to provide an extra security token. Based on research done by in the summer of 2011, we believe that this is the primary reason that RFC 3106 has been largely unused.”

Comment by Denis Sokolov

Note: at the time of my first comment there was no edit yet in the post.

Sure it is correct to develop a new, better spec.

It was still useful to remind the readers about RFC 3106 in the context of you longing for The Future™. :)

Comment by Dominic Sayers

I don’ think RFC 3106 “requires” anyone to do anything. It’s an informational RFC.

“This memo provides information for the Internet community. It does not specify an Internet standard of any kind.” – RFC 3106

Comment by Denis Sokolvo

Dominic, RFC 3106 does not require anyone in the sense of its enforcement.
If, however, you wished to receive advantages that it offers, you’d be required to make some concessions.
For example, change your name attribute values.

Comment by Andy Harvey

This is very interesting. We’ve recently decided to re-vamp our system and some of this advice I will definitely be taking this information on board!