HTML for Zip Codes

I just overheard this discussion on Twitter, kicked off by Dave.

Me (coding a form): <input id="zip" type="number">
Tiny Devil (appears on shoulder): Yaaas! I love the optimism, ship it!
Me: Wait, why are you here? Is this going to blow up on me? What do you know that I don't?

— Dave SPOOPert (@davatron5000) October 9, 2018

It seems like zip codes are just numbers, right? So...

<input id="zip" name="zip" type="number">

The advantage there being able to take advantage of free validation from the browser, and triggering a more helpful number-based keyboard on mobile devices.

But Zach pointed out that type="number" is problematic for zip codes because zip codes can have leading zeros (e.g. a Boston zip code might be 02119). Filament group also has a little lib for fixing this.

This is the perfect job for inputmode, as Jeremy suggests<input id="zip" name="zip" type="text" inputmode="numeric" pattern="^(?(^00000(|-0000))|(\d{5}(|-\d{4})))$">

But the support is pretty bad at the time of this writing.

A couple of people mentioned trying to hijack type="tel" for it, but that has its own downsides, like rejecting properly formatted 9-digit zip codes.

So, zip codes, while they look like numbers, are probably best treated as strings. Another option here is to leave it as a text input, but force numbers with pattern, as Pamela Fox documents:

<input id="zip" name="zip" type="text" pattern="[0-9]*">

The post HTML for Zip Codes appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2yDU0Ex
via IFTTT