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 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]*">
Source: CSS-tricks.com