How to input float numbers in HTML form?

Question

my code is as follows:

<input type="number" min="4.50" max="9.90"  id="cpi" name="cpi" required="required" title="CPI" class="formfield3" />

CPI is a float value. But if I open it in browser and input value which is the float number such as 7.89 then it shows message of 'Invalid Value'. How to solve it?

Answer 1

Set step="any"

<input type="number" min="4.50" max="9.90" step="any" id="cpi" name="cpi" required="required" title="CPI" class="formfield3" />

Answer 2

The number type has a step value controlling which numbers are valid (along with max and min), which defaults to 1. This value is also used by implementations for the stepper buttons (i.e. pressing up increases by step).

Simply change this value to whatever is appropriate. For money, two decimal places are probably expected:

<input type=number step=0.01 />

(I'd also set min=0 if it can only be positive)

As usual, I'll add a quick note: remember that client-side validation is just a convenience to the user. You must also validate on the server-side!