Número HTML: min, max, step, decimales y valueAsNumber

Referencia de HTML

Creado 2026-10-30 Última modificación 2026-10-30

HTML input type="number" acepta cantidades que se pueden comparar o incrementar. min y max establecen el rango, y step establece intervalos válidos. Permitir decimales requiere considerar tanto el intervalo como su base; los números telefónicos o códigos postales que parecen numéricos generalmente necesitan otro tipo de entrada.

min · max · step

min y max no necesariamente evitan escribir números fuera del rango. Incluso si se puede ingresar un valor no válido, la envío ordinario del formulario se bloquea mediante la validación. Agrega required si el valor no debe estar vacío.

La base del paso es un valor válido de min si está presente, de lo contrario, un atributo value válido de HTML, o cero si ninguno existe. Los valores válidos son un número entero de pasos desde esa base. El intervalo predeterminado es 1, pero una base decimal puede generar valores decimales válidos, por lo que el predeterminado no prohíbe universalmente los decimales.

Configuración	Ejemplos de valores válidos	Precaución
`min="0" step="1"`	`0`, `1`, `2`	`0.5` no se ajusta al intervalo.
`min="0" step="0.01"`	`1`, `1.2`, `1.23`	`1.234` no encaja. Esto no obliga a mostrar dos decimales.
`min="0" step="3"`	`0`, `3`, `6`, `9`	Múltiplos de tres desde una base cero.
`min="1" step="3"`	`1`, `4`, `7`, `10`	La base es uno, por lo que estos difieren de los múltiplos de tres.
`step="any"`	Varios valores decimales dentro del rango	Elimina la restricción de paso; las demás restricciones de rango y requeridas permanecen.

Comparar entrada entera y decimal en un ejemplo

Guarda este código completo como number.html y ábrelo en un navegador. Sin un servidor, compara la validación, las cadenas enviadas y los valores numéricos en JavaScript para cantidad y peso. Este ejercicio define el peso como de 0 a 100 kg en incrementos de 0,01 kg.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rangos e intervalos numéricos</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 16px 0 6px; }
    input { width: 12rem; max-width: 100%; box-sizing: border-box; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Introduce cantidad y peso</h1>
  <form id="demo">
    <label for="quantity">Cantidad (1–10, unidades enteras)</label>
    <input id="quantity" name="quantity" type="number"
      min="1" max="10" step="1" value="2" required>
    <label for="weight">Peso (0–100 kg, intervalos de 0,01 kg)</label>
    <input id="weight" name="weight" type="number"
      min="0" max="100" step="0.01" value="1.25" required>
    <p><button type="submit">Mostrar valores</button>
      <button type="reset">Restablecer</button></p>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const quantity = document.querySelector('#quantity');
    const weight = document.querySelector('#weight');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify({
        formData: [...new FormData(form).entries()],
        numbers: { quantity: quantity.valueAsNumber, weight: weight.valueAsNumber }
      }, null, 2);
    });
    form.addEventListener('input', () => { result.textContent = ''; });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

Envía los valores iniciales. formData (cadenas): "2", "1.25"; numbers (números): 2, 1.25.
Establece la cantidad en 11 y envía para activar la validación máxima. Establécela en 2,5 para la validación por incremento, o déjala en vacío para la validación requerida. Restaura la cantidad a 2.
Se envía un peso de 1,23, pero 1,234 no se ajusta al intervalo. El formato de los decimales fijos difiere de los intervalos numéricos válidos.
Cambia solo la cantidad de step="1" a step="3" y vuelve a abrir el archivo. Porque min="1", el valor inicial 2 no es válido pero 4 sí. Después, restaura el paso a 1.
Restablecer vuelve la cantidad a 2 y el peso a 1.25 y borra el resultado.

Distinguir identificadores que parecen numéricos

Los números de teléfono, códigos postales e identificaciones de membresía a menudo necesitan que se conserve su cadena original en lugar de hacer operaciones aritméticas. Los ceros iniciales o guiones pueden ser importantes. Considera type="tel" para teléfonos y type="text" inputmode="numeric" para identificadores que parecen numéricos. inputmode indica un teclado; no es una regla de validación numérica.

Los campos de entrada de números no usan maxlength ni pattern para limitar la cantidad de dígitos o patrones de expresiones regulares. Establece el ancho con CSS en lugar de size. Los navegadores difieren en el comportamiento de entrada de caracteres, las flechas de incremento y la visualización del separador decimal, así que no confíes en una sola apariencia o comportamiento de bloqueo.

Maneja números en JavaScript y en el servidor

input.value y los valores enviados por formularios ordinarios son cadenas. Usa valueAsNumber para un número; devuelve NaN cuando está vacío o no convertible. Convertir una cadena vacía con Number() produce cero, así que distingue primero un valor vacío si significa algo diferente de cero.

La validación solo en el navegador no hace que un valor sea confiable. Valide el formato numérico, la finitud, el rango y el incremento también en el servidor. Para cálculos que requieren precisión decimal, como importes, considere el error de coma flotante binaria de JavaScript y use enteros en la unidad de moneda más pequeña o un enfoque decimal adecuado.

La referencia de entrada de número de MDN explica los atributos y las reglas de base de paso.

Referencia de HTML