Otra posibilidad muy interesante que nos ofrece HTML5, a través del valor number, es la capacidad de utilizar campos numéricos. Estos permiten restringir el rango de números que el usuario podrá ingresar dentro del mismo. Veamos cómo es la sintaxis para este valor:
<form action=”envio.php” method=”post”>
<label for=”tel”>Cantidad de pasajes</label>
<input type=”number” id=”pasajes” name=”pasajes” required=”required”>
<input type=”submit” value=”ENVIAR”>
<input type=”reset” value=”BORRAR”>
</form>
Mediante este campo, el usuario podrá introducir únicamente valores numéricos, ya sea escribiendo el valor, o bien presionando los selectores para incrementarlo o reducirlo.
Este campo es muy útil cuando queremos preguntar a nuestros usuarios sobre cantidades de productos u otros datos de tipo numéricos.
Parámetros del valor number
El valor number cuenta, además, con algunos parámetros para completar su funcionalidad. Estos son:
– Min
– max
– step
Estos parámetros resultan muy útiles en la práctica. Por ejemplo, si el usuario necesitara introducir la cantidad de productos que desea comprar, está claro que sería imposible que ordenara una cantidad negativa, pero el problema es que el valor number por defecto permite ingresar valores tanto positivos como negativos. Para evitar que el usuario ingrese por error valores negativos, debemos usar el atributo min, mediante el cual podremos determinar cuál será el valor mínimo que aceptará este campo. Veamos cómo sería la sintaxis:
<input type=”number” id=”pasajes” name=”pasajes” required=”required” min=”1”>
En este caso, el campo no acepta valores inferiores a 1.
Por otro lado, existe también la posibilidad de que necesitemos establecer un valor máximo. En este caso debemos usar el atributo max, como podemos ver en el siguiente ejemplo:
<input type=”number” id=”pasajes” name=”pasajes” required=”required” min=”1” max=”15”>
En este caso, el elemento no permitirá ingresar valores superiores a 15, ya que así lo determina el valor del atributo max.
Por último, también existe la posibilidad de que necesitemos establecer un salto determinado entre valor y valor; por ejemplo, de dos en dos, de tres en tres, etc. En este caso vamos a usar el atributo step para determinar dicha secuencia. Veamos cómo sería la sintaxis para este atributo:
<input type=”number” id=”pasajes” name=”pasajes” required=”required” min=”1” max=”15” step=”5”>
En este caso, el atributo step posee un valor igual a 5, esto significa que los selectores de elemento pasarán de 5 en 5.
