Controles: Campos numéricos

Si deseamos obtener información o cantidades numéricas en un formulario, tenemos a nuestra disposición dos tipos de etiquetas <input>.

Tipos de campos numéricos

La primera de ellas es number, un tipo con el que podremos utilizar un campo de texto donde el usuario sólo puede escribir números (o carácteres como +, - o el número e, entre otros). La diferencia respecto a otros campos es que al mover el ratón sobre él, nos aparecen dos flechas que nos permiten aumentar o disminuir la cantidad numérica del campo.

Por otro lado, tenemos la etiqueta <input type="range">, que en lugar de mostrarnos un campo de texto que podemos modificar introduciendo directamente el número, podemos hacerlo mediante un «slider» o barra de desplazamiento que representa un número entre un rango numérico específico.

Mínimos, máximos y saltos

Tanto en una como en otra podemos indicar los atributos min, max y step, que veremos más adelante en el tema de validaciones HTML5, para indicar límites y restricciones:

Esto no significa que el usuario no pueda introducir un número menor que el indicado en el atributo min, por ejemplo, sino que si el usuario introduce ese número, los datos del campo no serán válidos, y no se podrá enviar el formulario hasta que se cumpla esa restricción.

Un ejemplo de código:

<form name="formulario" method="post" action="/send.php">
  <!-- Número entre 10 y 50, de 5 en 5. Valor por defecto: 25 -->
  <input type="number" name="numero" value="25" min="10" max="50" step="5" />
  <!-- Su misma versión, utilizando el slider en un rango numérico -->
  <input type="range" name="numrango" value="25" min="10" max="50" step="5" />
</form>

Las diferencias son las siguientes:

• En el campo con type a number es posible introducir manualmente números no permitidos.
• En el campo con type a range no es posible salirse del rango indicado.
• Tanto en uno como en otro, no es posible enviar el formulario si no se cumplen las restricciones.

De cualquier forma, si indicamos min=10, max=50 y step=5 en una etiqueta numérica <input>, los valores permitidos por el usuario serían 10, 15, 20, 25, 30, 35, 40, 45 y 50.