Html attribute 'Max' with float value make problems

Question

I want to show a popup on submit if the value is less than the max attribute. I am able to achieve that with the HTML5 attribute like this: <input type='number' max='21' /> but the problem is that when the max value is a float number like <input type='number' max='21.1' /> then it shows another popup saying that the value must be less than 21.

I've searched and I can solve that problem with Javascript but I want to use the max attribute even when the value is a float number.

<input type='number' max='21.1' /> <button type='submit'>Submit</button>

I want the form to be able to submit even if the value is 21 or 21.1 unless it is 21.2 or more.

Answer 1

You need to add the step property like this:

<form>
  <input type="number" max="21.1" step="0.1"/>
</form>

Alternatively you can use any as value:

<form>
  <input type="number" max="21.1" step="any"/>
</form>