Si queremos que el usuario introduzca información numérica, es mejor no utilizar un campo de texto, sino uno orientado a cantidades numéricas.

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

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:

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. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).