(Last Updated on )
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.)