Thursday, March 28

Tag: Zip codes pattern

CSS Tricks

HTML for Zip Codes

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