O number
tipo tem um step
valor que controla quais números são válidos (junto com max
e min
), cujo padrão é 1
. Este valor também é usado pelas implementações dos botões de passo (por exemplo, pressionar para cima aumenta em step
).
Simplesmente altere esse valor para o que for apropriado. Por dinheiro, provavelmente são esperadas duas casas decimais:
<input type="number" step="0.01">
(Eu também definiria min=0
se isso só pode ser positivo)
Se você preferir permitir qualquer número de casas decimais, use step="any"
(embora seja para moedas, recomendo continuar 0.01
). No Chrome e Firefox, os botões deslizantes aumentam / diminuem em 1 ao usar any
. (obrigado pela resposta de Michal Stefanow por apontar any
e veja as especificações relevantes aqui )
Aqui está um playground mostrando como várias etapas afetam vários tipos de entrada:
<form>
<input type=number step=1 /> Step 1 (default)<br />
<input type=number step=0.01 /> Step 0.01<br />
<input type=number step=any /> Step any<br />
<input type=range step=20 /> Step 20<br />
<input type=datetime-local step=60 /> Step 60 (default)<br />
<input type=datetime-local step=1 /> Step 1<br />
<input type=datetime-local step=any /> Step any<br />
<input type=datetime-local step=0.001 /> Step 0.001<br />
<input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
<input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
<input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>
Como sempre, adicionarei uma nota rápida: lembre-se de que a validação do lado do cliente é apenas uma conveniência para o usuário. Você também deve validar no lado do servidor!