Is there a float input type in HTML5?

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:

<label for="totalAmt">Total Amount</label>
<input type="number" step="0.01" id="totalAmt">

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

If you'd prefer to allow any number of decimal places, you can use step="any" (though for currencies, I'd recommend sticking to 0.01). In Chrome & Firefox, the stepper buttons will increment / decrement by 1 when using any. (thanks to Michal Stefanow's answer for pointing out any, and see the relevant spec here)

Here's a playground showing how various steps affect various input types:

Step 1 (default)
Step 0.01
Step any
Step 20
Step 60 (default)
Step 1
Step any
Step 0.001
Step 3600 (1 hour)
Step 86400 (1 day)
Step 70 (1 min, 10 sec)

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!

---

Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

But what if you want all the numbers to be valid, integers and decimals alike? In this case, set step to “any”

<input type="number" step="any" />

Works for me in Chrome, not tested in other browsers.

---

You can use:

<input type="number" step="any" min="0" max="100" value="22.33">

---

You can use the step attribute to the input type number:

<input type="number" id="totalAmt" step="0.1"></input>

step="any" will allow any decimal.
step="1" will allow no decimal.
step="0.5" will allow 0.5; 1; 1.5; ...
step="0.1" will allow 0.1; 0.2; 0.3; 0.4; ...

---

Based on this answer

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

Meaning :

Char code :

48-57 equal to 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

0 is Backspace(otherwise need refresh page on Firefox)

46 is dot

&& is AND , || is OR operator.

if you try float with comma :

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

Supported Chromium and Firefox (Linux X64)(other browsers I does not exist.)

---

I do so

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

then, I define min in 0.4 and max in 0.7 with step 0.01: 0.4, 0.41, 0,42 ... 0.7

---

Step 1 (default)
Step 0.01
Step any
Step 20
Step 60 (default)
Step 1
Step any
Step 0.001
Step 3600 (1 hour)
Step 86400 (1 day)
Step 70 (1 min, 10 sec)

---

I have started using inputmode="decimal" which works flawlessly with smartphones:

<input type="text" inputmode="decimal" value="1.5">

Note that we have to use type="text" instead of number. However, on desktop it still allows letters as values.

For desktop you could use:

<input type="number" inputmode="decimal">

which allows 0-9 and . as input and only numbers.

Note that some countries use , as decimal dividor which is activated as default on the NumPad. Thus entering a float number by Numpad would not work as the input field expects a . (in Chrome). That's why you should use type="text" if you have international users on your website.

You can try this on desktop (also with Numpad) and your phone:

Input with type text:

Input with type number:

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

---

yes this is the correct answer:

step="any"

This is more efficient. Trust me.

document.getElementById('form1').addEventListener('submit', function(e){ e.preventDefault(); alert("Your nnumber is: "+document.getElementById('n1').value) alert("This works no ? :) please upvote") })

Submit

---

I just had the same problem, and I could fix it by just putting a comma and not a period/full stop in the number because of French localization.

So it works with:

2 is OK

2,5 is OK

2.5 is KO (The number is considered "illegal" and you receive empty value).

---

<input type="number" step="any">

This worked for me and i think is the easiest way to make the input field accept any decimal number irrespective of how long the decimal part is. Step attribute actually shows the input field how many decimal points should be accepted. E.g, step="0.01" will accept only two decimal points.

---

Using React on my IPad, type="number" does not work perfectly for me. For my floating point numbers in the range between 99.99999 - .00000 I use the regular expression (^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$). The first group (...) is true for all positive two digit numbers without the floating point (e.g. 23), | or e.g. .12345 for the second group (...). You can adopt it for any positive floating point number by simply changing the range {0,2} or {0,5} respectively.

<input
  className="center-align"
  type="text"
  pattern="(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)"
  step="any"
  maxlength="7"
  validate="true"
/>

---

https://i.stack.imgur.com/ABKzK.png

---

If any of the methods doesn't work you can use parse float.

const totalAmt = document.getElementById("totalAmt"); totalAmt.addEventListener("change", (e)=>{ // e.preventDefault(e); const result = parseFloat(e.target.value); console.log(result) });

---