Perhaps surprisingly, when you use a Number type field, it will not allow you to enter decimal places. When you attempt the submit the form, the browser will consider a number with decimal places to be invalid.
This is due to the design of HTML5's INPUT type=number element, and the way most browsers handle it.
So what if you need decimal places?
Solutions
To allow decimal places in your number
Add custom attribute named step to your Input field and specify the number of optional decimal places you want to allow;
- .1 for one decimal place e.g. 23.4
- .01 for two decimal places
- .001 for three, and so on
- or any for an unlimited number
For a specific number of decimal places
If you want to require a certain number of decimal places, you can accomplish that with a pattern.
Add a custom attribute named pattern to your Input field and specify the following regex string.
- ^\d*\.\d$ to require exactly one decimal place
- ^\d*\.\d{2}$ to require exactly two decimal places
- ^\d*\.\d{2,4}$ to require two, three, or four decimal places
Adjust to your liking.
References
Allow 2 decimal places in <input type="number"> - StackOverflow
Is there a float input type in HTML5? - StackOverflow
