<input type="number">

En navegadores que no soportan entradas de tipo number, una entrada number recurre al tipo text.

Un Number representando el valor del número ingresado en la entrada. Tú puedes colocar el valor por omisión para la entrada incluyendo un número dentro del atributo value, de esta manera:

<input id="number" type="number" value="42" />

Además de los atributos comúnmente soportados por todos los tipos de <input>, las entradas de tipo number soportan estos atributos:

Los valores del atributo lista es el id de un elemento <datalist> localizado en el mismo documento. <datalist> proporciona una lista de valores predefinidos sugeridos al usuario para esta entrada. Cualquier valor de esta lista que no sea compatible con el type no es incluido entre las sugerencias. Los valores proporcionados son sugerencias, no requerimientos: los usuarios pueden seleccionar un valor de la lista o proporcionar uno diferente.

El valor máximo a aceptar para esta entrada. Si el value ingresado en el elemento lo excede, el elemento falla la validación de restricciones. Si el valor del atributo max no es un número, entonces el elemento no tiene un valor máximo.

Este valor debe ser mayor que o igual al valor del atributo min.

El valor mínimo a aceptar para esta entrada. Si el value del elemento es menor, el elemento falla la validación de restricciones. Si el valor del atributo min no es un número, entonces el elemento no tiene un valor mínimo.

Este valor debe ser menor que o igual al valor del atributo max.

El atributo placeholder es una cadena de texto que proporciona una pista corta al usuario sobre qué tipo de información se espera en la entrada. Debe ser una palabra o una frase corta que muestre el tipo de dato esperado, y no un mensaje explicatorio. El texto no debe incluir retornos de carro o saltos de línea.

Si el controlador de contenido tiene una direccionalidad (LTR o RTL), pero necesitas presentar el marcador de posición en la direccionalidad opuesta, puedes usar el algoritmo bidireccional para formatear caracteres Unicode para sobreescribir la direccionalidad del marcador de posición; véase Cómo usar los controles Unicode para texto bidireccional para más información.

Un atributo booleano el cual, si está presente, expresa que este campo no puede ser editado por el usuario. Este value puede todavía cambiarse con JavaScript directamente estableciendo la propiedad HTMLInputElement value.

El atributo step es un número que especifica la granularidad a la que debe adherirse el valor, o el valor especial any, el cual es descrito abajo. Solo valores que sean iguales a la base del escalonado (min si es especificado, si no value, y un valor por omisión apropiado si ninguno de esos es provisto) son válidos.

Un valor de cadena any significa que ningún escalonado es implicado, y cualquier valor es permitido (salvo otras restricciones, tales como min and max).

El valor por omisión para entradas number es 1, permitiendo solo ingresar números enteros, a menos que la base del escalonado no sea un entero.

La entrada de tipo number solo debe usarse para números incrementales, especialmente cuando los botones para incrementar y decrementar son útiles para la experiencia del usuario. La entradas de tipo number no son apropiadas para valores que solo consisten en números, pero que no son estrictamente hablando un número, como códigos postales o números de tarjeta de crédito. Para entradas no numéricas, considera usar un tipo de entrada diferente, como <input type="tel"> u otros tipos de <input> con el atributo inputmode:

<input type="text" inputmode="numeric" pattern="\d*" />

Los elementos <input type="number"> pueden ayudar a simplificar tu trabajo cuando construyes la interfaz de usuario y la lógica para introducir números en un formulario. Cuando creas una entrada con el valor de type adecuado, number, consigues validación automática de que el texto introducido es un número y usualmente un conjunto de botones arriba/abajo para incrementar o disminuir el valor.

Los navegadores de móviles ayudan más con la experiencia de usuario mostrando un teclado especial mejor adaptado para ingresar números cuando el usuario intenta ingresar un valor.

En su forma más básica, una entrada numérica puede ser implementada así:

<label for="ticketNum">Número de tickets que te gustaría comprar:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Una entrada numérica es considerada válida cuando está vacía y cuando un único número es ingresado, pero en cualquier otro caso es inválida. Si el atributo required es usado, la entrada ya no es considerada válida cuando está vacía.

Algunas veces es de ayuda ofrecer una indicación contextual sobre qué forma deben tomar los datos de entrada. Esto puede ser especialmente importante si el diseño de la página no ofrece etiquetas descriptivas para cada <input>. Es aquí donde entran los marcadores de posición. Un marcador de posición es un valor comúnmente usado para proveer un indicio del formato que la entrada debe tomar por value. Este es mostrado dentro de la caja de edición cuando el value del elemento es "". Una vez que los datos son ingresados dentro de la caja, la marca de posición desaparece; si la caja se vacía, la marca de lugar reaparece.

Aquí, tenemos una entrada number con el marcador de posición "Múltiplo de 10". Nota cómo el marcador de posición desaparece y reaparece conforme manipulas el contenido del campo de edición.

<input type="number" placeholder="Múltiplo de 10" />

Por defecto, los botones arriba y abajo provistos para que cambies el número pasarán el valor arriba y abajo de 1 en 1. Puedes cambiar esto con el atributo step, el cual toma como valor un número que especifica la cantidad de escalones. Tomando nuestro ejemplo de arriba, este contiene un marcador de posición que indica que el valor debe ser un múltiplo de 10; por lo tanto, tiene sentido agregar un valor a step de 10:

<input type="number" placeholder="Múltiplo de 10" step="10" />

En este ejemplo, verás que las flechas de subir y bajar escalón incrementan y decrementan el valor por 10 cada vez, y no por 1. Aún puedes ingresar manualmente un número que no sea múltiplo de 10, pero este será considerado inválido.

Puedes usar los atributos min y max para especificar un valor mínimo y máximo que pueda tener el campo. Por ejemplo, demos a nuestro ejemplo un mínimo de 0 y un máximo de 100:

<input type="number" placeholder="Múltiplo de 10" step="10" min="0" max="100" />

En esta versión actualizada, verás que los botones para subir y bajar escalón no te permitirán ir bajo 0 o sobre 100. Tú aún puedes ingresar manualmente un número fuera de estos límites, pero este será considerado inválido.

Un problema con las entradas numéricas es que su tamaño de escalón por omisión es 1. Si tratas de ingresar un número con un decimal (tal como "1.0"), este será considerado como inválido. Si quieres ingresar un valor que requiere decimales, necesitarás reflejar esto en el valor step (como por ejemplo, step="0.01" permitirá hasta dos dígitos en la parte decimal). Aquí tienes un ejemplo simple:

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

Fíjate que este ejemplo permite cualquier valor entre 0.0 y 10.0, con decimales de dos cifras. Por ejemplo, "9.52" es válido, pero "9.521" no.

Los elementos <input> de tipo number no soportan atributos de dimensión tales como size. Necesitarás recurrir a CSS para cambiar el tamaño de estos controles.

Por ejemplo, para ajustar el ancho de la entrada para que sea tan ancho como se necesita para ingresar un número de tres dígitos, podemos cambiar nuestro HTML para incluir un id y acortar nuestro marcador de posición ya que el campo es demasiado ancho para el texto que hemos estado usando hasta ahora:

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

Entonces añadimos un poco de CSS para acortar el ancho del elemento con el selector id #number:

#number {
  width: 3em;
}

El resultado será este:

Tú puedes proveer una lista de opciones por defecto que el usuario puede seleccionar especificando el atributo list, el cual contiene como valor el id de un <datalist>, la cual a su vez contiene un elemento <option> por cada valor sugerido. El value de cada option es el valor sugerido correspondiente para la caja de entrada numérica.

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

Ya hemos mencionado una serie de diferentes opciones de validación para las entradas number, pero revisémoslas ahora:

• Los elementos <input type="number"> automáticamente invalidan cualquier entrada que no sea un número (o vacío, si required está especificado).
• Puedes usar el atributo required para hacer las entradas vacías inválidas. (En otras palabras, la entrada tiene que ser completada).
• Puedes usar el atributo step para limitar los valores válidos a cierto grupo de escalones (como por ejemplo, múltiplos de 10).
• Puedes usar los atributos min y max para limitar los valores mínimo y máximo.

El siguiente ejemplo presenta todas las características anteriores, así como el uso de CSS para mostrar íconos de validez o invalidez, dependiendo del valor del input:

<form>
  <div>
    <label for="balloons">Número de globos a comprar (múltiplos de 10):</label>
    <input
      id="balloons"
      type="number"
      name="balloons"
      step="10"
      min="0"
      max="100"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

Trata de mandar el formulario con diferentes valores inválidos (por ejemplo: sin valor, valores por debajo de 0 o por encima de 100, valores que no sea múltiples de 10) y fíjate como el mensaje de error que te arroja el navegador varía.

El CSS aplicado a este ejemplo es el siguiente:

div {
  margin-bottom: 10px;
}

input:invalid + span:after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  content: "✓";
  padding-left: 5px;
}

Aquí utilizamos las pseudoclases :invalid y :valid para mostrar un ícono apropiado, según la invalidez o validez del campo, como contenido generado en el elemento adyacente <span>, sirviéndonos de indicador visual.

Lo colocamos en un elemento separado <span> para mayor flexibilidad. Algunos navegadores no muestran contenido generado muy eficientemente en algunos tipos o entradas de formulario. (Lee, por ejemplo, la sección sobre validación <input type="date">).

Los elementos <input type="number"> no soportan el uso del atributo pattern para hacer que los valores ingresados se ajusten a un patrón de expresión regular específico.

La razón para esto es que las entradas numéricas no serán válidas si contienen cualquier cosa excepto números, y tú puedes restringir el número mínimo y máximo de dígitos válidos usando los atributos min y max.

Ya hemos cubierto el hecho de que, por defecto, el incremento es 1 y tú puedes usar el atributo step para permitir entradas decimales. Echemos un vistazo más de cerca.

En el siguiente ejemplo hay un formulario para ingresar la estatura del usuario. Por defecto, acepta la estatura en metros, pero puedes hacer click en el botón para que el formulario acepte pies y pulgadas. La entrada para la estatura en metros acepta decimales a dos posiciones.

El HTML se ve así:

<form>
  <div class="metersInputGroup">
    <label for="meters">Introduce tu estatura en metros:</label>
    <input
      id="meters"
      type="number"
      name="meters"
      step="0.01"
      min="0"
      placeholder="p. ej. 1.78"
      required />
    <span class="validity"></span>
  </div>
  <div class="feetInputGroup" style="display: none;">
    <span>Introduce tu estatura </span>
    <label for="feet">pies:</label>
    <input id="feet" type="number" name="feet" min="0" step="1" />
    <span class="validity"></span>
    <label for="inches">pulgadas:</label>
    <input id="inches" type="number" name="inches" min="0" max="11" step="1" />
    <span class="validity"></span>
  </div>
  <div>
    <input
      type="button"
      class="meters"
      value="Introduce la altura en pies y pulgadas" />
  </div>
  <div>
    <input type="submit" value="Enviar formulario" />
  </div>
</form>

Verás que estamos usando muchos de los atributos que ya hemos visto antes en el artículo. Como queremos que acepte un valor de medida en centímetros, hemos colocado el valor de step a 0.01, de manera que valores como 1.78 no sean vistos como inválidos. También hemos provisto un marcador de posición para esa entrada.

Hemos escondido las entradas de pies y pulgadas inicialmente usando style="display: none;", de manera que metros sea el tipo de entrada preseleccionado.

Ahora, al CSS. Este se ve muy similar al estilo de validación que vimos antes; nada extraordinario aquí.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span:after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Y finalmente, el JavaScript:

let metersInputGroup = document.querySelector(".metersInputGroup");
let feetInputGroup = document.querySelector(".feetInputGroup");
let metersInput = document.querySelector("#meters");
let feetInput = document.querySelector("#feet");
let inchesInput = document.querySelector("#inches");
let switchBtn = document.querySelector('input[type="button"]');

switchBtn.addEventListener("click", function () {
  if (switchBtn.getAttribute("class") === "meters") {
    switchBtn.setAttribute("class", "feet");
    switchBtn.value = "Introduce tu estatura en metros:";

    metersInputGroup.style.display = "none";
    feetInputGroup.style.display = "block";

    feetInput.setAttribute("required", "");
    inchesInput.setAttribute("required", "");
    metersInput.removeAttribute("required");

    metersInput.value = "";
  } else {
    switchBtn.setAttribute("class", "meters");
    switchBtn.value = "Introduce la altura en pies y pulgadas";

    metersInputGroup.style.display = "block";
    feetInputGroup.style.display = "none";

    feetInput.removeAttribute("required");
    inchesInput.removeAttribute("required");
    metersInput.setAttribute("required", "");

    feetInput.value = "";
    inchesInput.value = "";
  }
});

Después de declarar unas pocas variables, un manejador de eventos es agregado al button para controlar el botón. Esto es bastante simple, principalmente involucra cambiar las <label> y class del botón, y actualizar los valores de muestra de los dos conjuntos de entradas cuando el botón sea presionado.

(Fíjate que aquí no estamos convirtiendo de aquí para allá entre metros y pies/pulgadas, lo que probablemente haría una aplicación web en la vida real.)

El rol implícito para el elemento <input type="number"> es spinbutton. Si el spinbutton no es una funcionalidad importante para el controlador de tu formulario, considera no usar type="number". Por el contrario, usa inputmode="numeric" junto con el atributo pattern que limita los caracteres a números y a caracteres asociados. Con <input type="number">, existe el riesgo que los usuarios accidentalmente incrementen un número cuando están intentando hacer otra cosa. Adicionalmente, si los usuarios tratan de introducir algo que no es un número, no hay ninguna sugerencia explícita sobre qué están haciendo mal.

También considera usar el atributo autocomplete para ayudar a los usuarios a completar formularios más rápidamente con menos posibilidades de error. Por ejemplo, para habilitar el auto completado en un campo de código postal, estipula autocomplete="postal-code".

• Guía de formularios HTML
• <input>
• <input type="tel">
• Compatibilidad de propiedades CSS
• Artículo: Why Gov.UK changed the input type for numbers