The number attribute in HTML5 may give you a warning, “Please Enter A Valid Value”. Using decimals in HTML5 requires that you use an attribute of “step”. Consider the following in the form tag element.
<form> <input type="number" name="price"> <input type="submit" value="submit"> </form>
This will result in a blank box.
When entering a decimal value into the box you may get a warning. After you click the submit button you will see something that looks like this.
HTML5 Input Default for Numbers
As you can see the default for HTML5 is whole numbers. In order to use a decimal you have to use a step attribute. See code below.
<form> <input type="number" step="any" name="price"> <input type="submit" value="submit"> </form>
Other Examples of Step in HTML5
Here are some other examples of how you can use the step attribute.
<form> <input type=number step=1 > Whole Numbers <input type=number step=0.01 >Decimals <input step="any" type="number" > Whole or Decimals <input step="10" type="range" > Range of 10 <input type="submit" ></form>
When Processing Forms With Decimals
Remember that when you are processing forms with decimals you must have your database set up properly. For example if you want to use integers in your mySql database with decimals you must specify it.
Example of Specifying Decimal Integers in MySql
decimal(4,2) if you want to be able to store numbers like 1452.87 or xxxx.xx.
Please like, share and subscribe.
I hope you enjoyed the article. If I was able to help you please consider a tip for the content.
One Time Tip