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.

Tipo de información a obtener Etiqueta a utilizar Ejemplo
Número o cantidad numérica <input type="number">
Rango numérico <input type="range">

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:

Atributo Valor Significado del atributo
min número mínimo Número mínimo permitido para pasar validación.
max número máximo Número máximo permitido para pasar validación.
step incremento o decremento Variación permitida entre números para pasar validación.

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="http://pagina.com/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 <input type="number"> es posible introducir manualmente números no permitidos.
  • En el campo <input type="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.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.