What html5 form attribute should be used for a zipcode? - html

Question

Is it best to use a 'text' attribute with a limit on the number of characters, or can I use a number attribute in an input for a zipcode.
Just trying to get my head around all the different attributes with the forms in html5.
Cheers

Answer 1

You can try this
<Label>ZIP Code</Label><input type="text" pattern="[0-9]{5}" title="Five digit zip code" />

Answer 2

“Should” is a strong word, but there is actually a “should” class statement about issues like this. HTML5 CR says about input type=number:
Note: The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a
number. For example, it would be inappropriate for credit card numbers
or US postal codes. A simple way of determining whether to use
type=number is to consider whether it would make sense for the input
control to have a spinbox interface (e.g. with "up" and "down"
arrows).
The means that the only feasible element for the purpose is input type=text, when using built-in constructs. You can use the maxlength attribute to set the maximum number of characters (works on all browsers) and additionally a pattern attribute what specifies the allowed characters and combinations, too; its value naturally depends on the zipcode type(s) to be used. For international postal addresses, you probably should not use any pattern or even maxlength, since the formats vary.

Answer 3

To allow ZIP+4:
<input type="text" placeholder="Zip Code" title="Please enter a Zip Code" pattern="^\s*?\d{5}(?:[-\s]\d{4})?\s*?$">
To be friendly to the user, this also permits whitespace before/after the string, which the developer will need to trim serverside.

Answer 4

If you have any international users you are going to want to allow alpha numeric via type="text"
Example: UK postal codes are formatted as AA9A 9AA
9 = any number
A = any letter

Answer 5

There are various options from my POV, but I think the best is already given by Md Johorul Islam: the pattern attribute.
The options:
Use a regular expression (the pattern attribute);
Use a custom (jQuery) mask control, like jQuery mask;
For the platforms where this is not supported, use type=text with a maxlength.
Note: Despite these options: always validate server side!

Answer 6

"Best" is subjective/contextual. But from a usability perspective, Zach Leatherman studied number-ish inputs in 2016 and specifically addressed the ZIP input.
The goal was to make "big number keyboards" appear on mobile devices. This may seem insignificant, but easing form input in e-commerce checkout forms is an important goal.
It seems that some day the inputmode="numeric" attribute will be appropriate for zip inputs. But for now, only Chrome/Android supports it (Firefox has it behind a flag).
Zach developed a small library called numeric-input as part of his formcore package which will implement the best possible case for whatever browser is being used.
Keep in mind, the library is a couple years old, and browser behavior might have changed since then.

Answer 7

You can use either and the form will work. However, it might be a better idea to use number because, for example, mobile devices would invoke a different keyboard layout - with numbers and helper characters instead of the full alphanum keyboard.
But, if you think setting one type as opposed to another will offer a higher level of security, you're wrong. No matter which type you put, it will offer you no security. Every form input needs to be checked on the server as well - that's where the real security check happens. The check that you do in browser, is more of a UI/UX thing.
Here is a nice article about different input types: http://html5doctor.com/html5-forms-input-types/

Answer 8

<input type="tel" pattern="[0-9]*" placeholder="Zip Code" max="99999" />
Type set tel to show numeric keypad, pattern to except values 0-9 and max set to prevent values beyond US 7 digit zip codes.