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…
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</a<:
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: