HTML for Zip Codes
I just overheard this discussion on Twitter, kicked off by Dave.
Me (coding a form):
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
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.
