Número HTML: min, max, step, decimais e valueAsNumber

O HTML input type="number" aceita quantidades que podem ser comparadas ou incrementadas. min e max definem o intervalo, e step define intervalos válidos. Permitir decimais requer considerar tanto o intervalo quanto sua base; números de telefone ou códigos postais que parecem numéricos geralmente precisam de outro tipo de entrada.

min · max · step

min e max não necessariamente impedem a digitação de números fora do intervalo. Mesmo que um valor inválido possa ser inserido, o envio normal do formulário é bloqueado pela validação. Adicione required se o valor não deve estar vazio.

O passo base é um valor válido de min se presente, caso contrário, um valor válido do atributo HTML value, ou zero se nenhum existir. Valores válidos são um número inteiro de passos a partir dessa base. O intervalo padrão é 1, mas uma base decimal pode gerar valores decimais válidos, então o padrão não proíbe universalmente decimais.

Comparar entrada inteira e decimal em um exemplo

Salve este código completo como number.html e abra-o em um navegador. Sem um servidor, compare a validação, as strings enviadas e os valores numéricos em JavaScript para quantidade e peso. Este exercício define o peso como 0–100 kg em incrementos de 0,01 kg.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Intervalos e passos 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>Informe quantidade e peso</h1>
  <form id="demo">
    <label for="quantity">Quantidade (1–10, unidades inteiras)</label>
    <input id="quantity" name="quantity" type="number"
      min="1" max="10" step="1" value="2" required>
    <label for="weight">Peso (0–100 kg, passos 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">Redefinir</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>

1. Envie os valores iniciais. formData (strings): "2", "1.25"; numbers (números): 2, 1.25.
2. Defina a quantidade como 11 e envie para acionar a validação máxima. Defina como 2,5 para validação de passo, ou deixe em branco para validação de campo obrigatório. Restaure a quantidade para 2.
3. Um peso de 1,23 é enviado, mas 1,234 não se encaixa no intervalo. A formatação fixa do número de casas decimais difere dos intervalos numéricos válidos.
4. Altere apenas a quantidade de step="1" para step="3" e reabra o arquivo. Porque min="1", o valor inicial 2 é inválido, mas 4 é válido. Restaure o passo para 1 depois.
5. Redefinir retorna a quantidade para 2 e o peso para 1,25 e limpa o resultado.

Distinguir identificadores que parecem numéricos

Números de telefone, códigos postais e IDs de associados muitas vezes precisam que sua string original seja preservada em vez de serem tratados como valores aritméticos. Zeros à esquerda ou hífens podem importar. Considere type="tel" para telefones e type="text" inputmode="numeric" para identificadores que parecem numéricos. inputmode indica um teclado; não é uma regra de validação numérica.

Os campos de entrada numérica não usam maxlength ou pattern para restringir a quantidade de dígitos ou padrões de expressão regular. Defina a largura com CSS, em vez de size. Os navegadores diferem no comportamento de entrada de caracteres, setas de incremento e exibição do separador decimal, portanto, não dependa de uma única aparência ou comportamento de bloqueio.

Manipule números em JavaScript e no servidor

input.value e valores submetidos por formulários comuns são strings. Use valueAsNumber para um número; ele retorna NaN quando vazio ou não conversível. Converter uma string vazia com Number() produz zero, portanto, distinga primeiro um valor vazio se ele significar algo diferente de zero.

A validação no navegador sozinha não torna um valor confiável. Valide também o formato numérico, a finitude, o intervalo e o passo no servidor. Para cálculos que requerem precisão decimal, como valores monetários, considere o erro de ponto flutuante binário do JavaScript e use inteiros na menor unidade da moeda ou uma abordagem decimal adequada.

A referência de entrada numérica MDN explica atributos e regras base de passo.