El HTML5 number input es otro de los nuevos input para los formularios HTML5.
Este elemento valida automáticamente que los valores introducidos sean numéricos sin necesidad de scripts adicionales, toda la validación la realiza el propio navegador. Esto va a ahorrarnos varias líneas de código PHP o jQuery a la hora de validar los formularios.
Debajo de estas líneas podemos ver la sencilla sintaxis del number input:
<input type="number" name="edad">
Este nuevo input de HTML5 se compone del atributo ‘name’ y del tipo de input ‘type’. Más abajo detallaré el resto de atributos válidos.
Vamos a probar con este primer ejemplo de HTML5 number input su funcionamiento básico, sin forzar a meter contenido no numérico:
<form name="ejemplo1" action="11-html5-number-input.php" method="POST"> Introduce tu edad: <input type="number" name="edad"> <input type="submit" value="Enviar"> </form> <?php //sacamos la edad introducida if ($_POST['edad']) echo "la edad recibida es: " .$_POST['edad']; ?>
Os explico el ejemplo:
Esta imagen inferior muestra el input en Google Chrome. Este input tiene a su derecha 2 flechas verticales (arriba y abajo), estas flechas vienen por defecto con el input y sirven para cambiar el valor.
Si volvemos al ejemplo del number input, podemos intentar a introducir contenido no numérico y nos saldrá un mensaje similar al de la imagen inferior.
Tal y como comenté anteriórmente, esta validación la hace automáticamente el propio navegador sin necesidad de código adicional.
Voy a poneros un segundo ejemplo usando varios de los atributos válidos para este input. Al final del post he puesto todos los atributos, pero antes voy a poneros los que voy a usar en este ejemplo:
Os pongo el código:
<form name="ejemplo2" action="11-html5-number-input.php" method="POST"> Introduce tu edad (min=18 max=99, campo obligatorio): <input type="number" name="edad" min="18" max="99" step="5" required="required"> <input type="submit" value="Enviar"> </form> <?php if ($_POST['edad']) echo "la edad recibida es: " .$_POST['edad']; ?>
Con los controles anteriormente mencionados nos saltarán estos mensajes de aviso:
Voy a listaros los atributos válidos para este input según la W3C.
En esta url tenéis el listado completo de los nuevos input de HTML5.
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.