[html] Is there a float input type in HTML5?

According to html5.org, the "number" input type's "value attribute, if specified and not empty, must have a value that is a valid floating point number."

Yet it is simply (in the latest version of Chrome, anyway), an "updown" control with integers, not floats:

_x000D_
_x000D_
<input type="number" id="totalAmt"></input>
_x000D_
_x000D_
_x000D_

Is there a floating point input element native to HTML5, or a way to make the number input type work with floats, not ints? Or must I resort to a jQuery UI plugin?

This question is related to html input floating-point

The answer is


You can use:

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

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.)


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; ...


This topic (e.g. step="0.01") relates to stepMismatch and is supported by all browsers as follows: enter image description here


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:

_x000D_
_x000D_
<p>Input with type text:</p>
<input type="text" inputmode="decimal" value="1.5">
<br>
<p>Input with type number:</p>
<input type="number" inputmode="decimal" value="1.5">
_x000D_
_x000D_
_x000D_


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


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"
/>

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


<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.


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.


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).


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to input

Angular 4 - get input value React - clearing an input value after form submit Min and max value of input in angular4 application Disable Button in Angular 2 Angular2 - Input Field To Accept Only Numbers How to validate white spaces/empty spaces? [Angular 2] Can't bind to 'ngModel' since it isn't a known property of 'input' Mask for an Input to allow phone numbers? File upload from <input type="file"> Why does the html input with type "number" allow the letter 'e' to be entered in the field?

Examples related to floating-point

Convert list or numpy array of single element to float in python Convert float to string with precision & number of decimal digits specified? Float and double datatype in Java C convert floating point to int Convert String to Float in Swift How do I change data-type of pandas data frame to string with a defined format? How to check if a float value is a whole number Convert floats to ints in Pandas? Converting Float to Dollars and Cents Format / Suppress Scientific Notation from Python Pandas Aggregation Results