What html5 form attribute should be used for a zipcode?

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

Ealdorman

Do you mean ZIP code in the strict U.S sense or a more general postal code? – Chapbook

Answer 1

You can try this

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

Legionnaire

I just cited example. You can use simply <label>ZIP Code</label> <input type="text" pattern="[0-9]{4}" title="Four digit zip code" /> – Legionnaire

Depending on the country different schemes for zip codes are used! For example Germany uses 5 digit numeric codes, while Austria uses 4 digit numeric codes and the UK even uses a mixture of alphanumeric chars. Don't try to limit user input that way, except you're 100% sure that you only except postal codes for one country (for ex. lets say you only ship products to one country or your service is limited to one country by legal reasons). – Supplant

United States uses 5 but can also include a +4, making it 10 characters (i.e. 12345-1234) – Pedroza

@AnujTBE It is accepting characters, but it sets the pseudo type for invalidated, and will show a red border around the input field in most browsers. The attribute can be styled, and also queried to prevent submit. – Droll

Instead of using type="text" we could use type="number". That disables the possibility to enter characters. It also accepts min and max values which can be useful. <input type="number" name="zip" pattern="[0-9]{5}" min="11111" max="99999" placeholder="Zip Code">. It's not supported in IE9 though. – Chirpy

@Chirpy If you lived in Agawam, Massachusetts, United States, you could not enter your zip code of 01001. – Decolorant

@Userthatisnotauser okay then change the min value to 00000 and even the Agawams can enter their zip code! – Chirpy

This is allowing the alphabets to be entered in to the text field. – Pistil

Note: I looked at my database and I have exactly 10% of users that entered in a zip+4 value. I would guess about 1% of people actually know what their +4 number is and the other 99% was entered by an autofill functionality. – Thomajan

Phones are smart enough to show the right keyboard with just the pattern, you don't actually need type="number" to invoke the numeric keyboard. So only do that if you hate people in Massachusetts. – Thomajan

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.

Eleph

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.

Damiandamiani

Good answer, but this is for US Zip code pattern, be careful if you want to provide a global pattern or a specific country. You may need to think if this solution fits your needs. – Emblazonry

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

Donkey

Answer 5

<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.

Vadnee

Answer 6

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!

Hesketh

Answer 7

"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.

Elnaelnar

Answer 8

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/

Coper

Canadian postal codes are a combination of numbers and letters, FYI – Bik

Didn't know that. – Coper

@Coper Andrew M pointed out that UK postal codes are the same way. – Decolorant

Answer 9

The other answers don't work well. For a ZIP code with optional plus 4 try:

title="Please enter a valid Zip Code" pattern="\d{5,5}(-\d{4,4})?"

Bathesda