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 ”
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.
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™. 
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
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.
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!
And all this HTML stuff of course needs some CSS companionship. Time to resuscitate my old proposal to the CSS WG?