HTML5 ofrece tipos específicos para validar y restringir la entrada de números
type="tel"
smartphone
Teclado numérico
format_list_numbered
Sin validación estricta
pattern
Acepta pattern
type="number"
exposure
Solo números
trending_up
min, max, step
exposure
Flechas de incremento
code
Ejemplo de código
<label for="telefono">Teléfono:</label>
<input type="tel" id="telefono" name="telefono" pattern="[0-9]{9}">
<label for="cantidad">Cantidad:</label>
<input type="number" id="cantidad" name="cantidad" min="1" max="10" step="1">
<input type="tel" id="telefono" name="telefono" pattern="[0-9]{9}">
<label for="cantidad">Cantidad:</label>
<input type="number" id="cantidad" name="cantidad" min="1" max="10" step="1">
Ejemplo interactivo
Formato: 9 dígitos numéricos
Valor entre 1 y 10
Incrementos de 0.01
lightbulb
Ventajas
- Teclado numérico optimizado en móviles
- Validación automática sin JavaScript
- Control preciso de valores permitidos