Escuché esta discusión en Twitter, iniciado por Dave.
Yo (codificando un formulario):
Tiny Devil (aparece en el hombro): ¡Yaaas! Me encanta el optimismo, ¡envíalo!
Yo: Espera, ¿por qué estás aquí? ¿Esto me va a explotar? ¿Qué sabes que yo no?
– Dave SPOOPert (@ davatron5000) 9 de octubre de 2018
Parece que los códigos postales son solo números, ¿verdad? Entonces…
<input id="zip" name="zip" type="number">La ventaja es poder aprovechar la validación gratuita desde el navegador y activar un teclado numérico más útil en dispositivos móviles.
Pero Zach señaló que type="number" es problemático para los códigos postales porque los códigos postales pueden tener ceros a la izquierda (por ejemplo, un código postal de Boston podría ser 02119). El grupo de filamentos también tiene una pequeña biblioteca para solucionar este problema.
Este es el trabajo perfecto para inputmode, como Jeremy sugiere:
<input id="zip" name="zip" type="text" inputmode="numeric" pattern="^(?(^00000(|-0000))|(d{5}(|-d{4})))$">Pero el soporte es bastante malo en el momento de escribir este artículo.
Un par de personas mencionaron haber intentado secuestrar type="tel" para ello, pero eso tiene sus propias desventajas, como rechazar códigos postales de 9 dígitos formateados correctamente.
Por lo tanto, los códigos postales, aunque parecen números, probablemente se traten mejor como cadenas. Otra opción aquí es dejarlo como text entrada, pero forzar números con pattern, como documenta Pamela Fox:
<input id="zip" name="zip" type="text" pattern="[0-9]*">Como muchos han señalado en los comentarios, vale la pena señalar que los patrones numéricos para los códigos postales son los más adecuados para los EE. UU. Ya que muchos de los códigos de muchos otros países contienen números y letras.