<input type="number">

Elementos <input> del tipo number son usados para permitir al usuario ingresar un número. Éstos incluyen validación incorporada para rechazar entradas no numéricas. El navegador puede optar por proveer flechas de pasos para permitir al usuario incrementar y decrementar el valor usando su ratón o símplemente pulsando con la punta del dedo.

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

Value Un Number representando un número, o vacío.
Eventos change e input
Atributos comunes que soporta autocomplete, list, placeholder, readonly
Atributos IDL list, value, valueAsNumber
Métodos select(), stepUp(), stepDown()

Valor

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">

Atributos adicionales

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

Atributo Descripción
list El id del elemento <datalist> que contiene las opciones predefinidas de autocompletado.
max El valor máximo a aceptar para esta entrada
min El valor mínimo a aceptar para esta entrada
placeholder Un valor de ejemplo para mostrar dentro del campo cuando esté vacío
readonly Un atributo Booleano indicando si el valor es de solo lectura
step El intervalo de paso a usar cuando se usen las flechas arriba y abajo para ajustar el valor, así como para su validación

list

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

max

El valor máximo a aceptar para esta entrada. Si el value ingresado en el elemento excede éste, 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.

min

El valor mínimo a aceptap para esta entrada. Si el value del elemento es menor que éste, el elemento falla la validación de restricciones. Si un valor es especificado para min que no sea un número valido, la entrada no tiene un valor mínimo.

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

placeholder

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

If the control's content has one directionality (LTR or RTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see Overriding BiDi using Unicode control characters in The Unicode Bidirectional Text Algorithm for those characters.

Note: Avoid using the placeholder attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels and placeholders in <input>: The Input (Form Input) element for more information.

readonly

A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement.value property.

Note: Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

step

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.

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

Nota: Cuando los datos ingresados por el usuario no se adhieran a la configuración de escalonado, el user agent puede redondear al valor válido más cercano, prefiriendo numeros en la dirección positiva cuando hayan dos opciones igualmente cercanas.

El valor por omisión de paso para entradas number es 1, permitiendo solo enteros ser ingresados—a menos que la base del escalonado no sea un entero.

Usar entradas numéricas

Elementos <input type="number"> pueden ayudar a simplificar tu trabajo al construir la interfaz de usuario y la lógica para ingresar números en un formulario. Cuando creas una entrada numérica con el valor apropiado para type, number, obtienes validación automática para que el texto sea un número, y usualmente un juego de botones arriba y abajo para subir y bajar el valor.

Importante: Ten en mente que, lógicamente, no deberías poder ingresar otros caracteres que no sean números dentro de una entrada numérica. Parece haber algo de desacuerdo acerca de esto entre navegadores; ver error 1398528.

Nota: Es crucial recordar que un usuario puede jugar con tu HTML tras bambalinas, así que tu sitio no debe usar validación simple del lado del cliente para ningún fin de seguridad. Tú debes verificar en el lado del servidor cualquier transacción en la cual el valor provisto pueda tener alguna implicación de seguridad de cualquier tipo.

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 intente ingresar un valor. La siguiente captura de pantalla es tomada de Firefox para Android:

Una entrada numérica simple

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

<label for="ticketNum">Number of tickets you would like to buy:</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 por lo demás es inválida. Si el atributo xxxx es usado, la entrada ya no es considerada válida cuando esté vacía.

Nota: Cualquier número es un valor aceptable, mientras que sea un número de punto flotante válido (eso es, no NaN o Infinity).

Marcas de lugar (Placeholders)

Algunas veces es de ayuda ofrecer una indicación en contexto en cuanto a 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 las marcas de lugar. Una marca de lugar es un valor comúnmente usado para proveer un indicio en cuanto al 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 lugar desaparece; si la caja es vaciada, la marca de lugar reaparece.

Aquí, tenemos una entrada number con la marca de lugar "Multiple of 10". Nota cómo la marca de lugar desaparece y reaparece conforme manipulas el contenido del campo de edición.

<input type="number" placeholder="Multiple of 10">

Controlar el tamaño del escalón

Por omisión, los botones arriba y abajo provistos para que pases el número de arriba a abajo pasarán por 1 el valor arriba y abajo. Puedes cambiar esto proveyendo un atributo step, el cual toma como valor un número que especifica la cantidad de escalones. Nuestro ejemplo arriba contiene una marca de lugar diciendo 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="multiple of 10" step="10">

En este ejemplo, debes hallar 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.

Especificar valores máximo y mínimo

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="multiple of 10" step="10" min="0" max="100">

En esta versión actualizada, debes hallar 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.

Permitir valores decimales

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 (p.ej. step="0.01" para permitir hasta dos dígitos en la parte decimal). Aquí hay un ejemplo simple:

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

Note que este ejemplo permite cualquier valor entre 0.0 y 10.0, con decimales a dos cifras. Por ejemplo, "9.52" es válido, pero "9.521" no lo es.

Controlar el tamaño de la entrada

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 xxxx y acortar nuestra marca de lugar (placeholder) ya que el campo estará demasiado angosto para el texto que hemos estado usando hasta ahora:

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

Entonces agregamos algo de CSS para reducir el ancho del elemento con el selector de id, #number:

#number {
  width: 3em;
}

El resultado se ve así:

Ofrecer valores sugeridos

Tú puedes proveer una lista de las opciones por defecto de las cuales el usuario puede seleccionar especificando el atributo list, el cual contiene como su valor el id de un <datalist>, el cual a su vez contiene un elemento <option> por 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 value="103421">
  <option value="11111111">
  <option value="12345678">
  <option value="12999922">
</datalist>

El uso del atributo list con entradas number no está soportado en todos los navegadores. Funciona en Chrome y Opera, por ejemplo, pero no en Firefox.

Validación

Ya hemos mencionado una serie de características de validación para entradas number, pero revisémoslas ahora:

  • Elementos <input type="number"> automáticamente invalidan cualquier entrada que no sea un número (o vacío, a menos que se especifique required ).
  • Puedes usar el atributo required para invalidar una entrada vacía. (En otras palabras, la entrada debe ser llenada).
  • Puedes usar el atributo step para restringir valores válidos a cierto conjunto de escalones (p.ej. múltiplos de 10).
  • Puedes usar los atributos min y max para restringir los límites inferior y superior de los valores válidos.

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">Number of balloons to order (multiples of 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>

Intenta enviar el formulario con diferentes valores inválidos ingresados — p.ej., siv valor; un valor abajo de 0 o arriba de 100; un valor que no sea múltiplo de 10; o un valor no numérico — y mira cómo los mensajes de error que te da el navegador difieren con estos.

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 pseudo clases :invalid y :valid para mostrar un ícono apropiado de invalidez o validez como contenido generado en el elemento adyacente <span>, como un 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 de <input type="date">).

Importante: ¡La validación de formularios HTML no es un substituto de scripts del lado del servidor que asegure que los datos estén en el formato apropiado!

Es demasiado fácil para alguien hacer ajustes al HTML que le prmita evitar la validación, o removerla completamente. También es posible para alguien evadir tu HTML y enviar los datos directamente a tu servidor.

Si tu código del lado del servidor falla el validar los datos que recibe, el desastre podría azotar cuando datos que no están formateados apropiadamente sean enviados (o cuando los datos son demasiado grandes, o son del tipo incorrecto, y así sucesivamente).

Validación de patron

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 fundamentació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 (a como se explica arriba).

Ejemplos

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 apropiado para cambiar el formulario a que 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">Enter your height — meters:</label>
        <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required>
        <span class="validity"></span>
    </div>
    <div class="feetInputGroup" style="display: none;">
        <span>Enter your height — </span>
        <label for="feet">feet:</label>
        <input id="feet" type="number" name="feet" min="0" step="1">
        <span class="validity"></span>
        <label for="inches">inches:</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="Enter height in feet and inches">
    </div>
    <div>
        <input type="submit" value="Submit form">
    </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 una marca de lugar (placeholder) 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 = 'Enter height in meters'

    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 = 'Enter height in feet and inches'

    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 s agredgado al button para controlar el mecanismo interruptor. 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.

(Nota 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.)

Nota: Cuando el usuario haga click en el botón, el(los) atributo(s) required de la(s) entradas que estemos ocultando son removidos, y vaciará el value del(los) atributo(s). Esto es de manera que el formulario pueda ser enviado si ambos conjuntos de entradas no están llenas. También asegura que el formulario no enviará datos que el usuario no quiera.

¡Si no hicieras eso, tendrías que llenar ambos pies/pulgadas y metros para enviar el formulario!

Especificaciones

Specification Status Comment
HTML Living Standard
La definición de '<input type="number">' en esta especificación.
Living Standard Definición inicial
HTML 5.1
La definición de '<input type="number">' en esta especificación.
Recommendation Definición inicial

Compatibilidad de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
type="number"Chrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo 10Opera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo

Ver también