Is there a float input type in HTML5

Question

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   lt input type  number  id  totalAmt  gt  lt  input gt  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

User · Accepted Answer

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    lt input type  number  step  0 01  gt     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  amp  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     x000D   x000D   lt form gt  x000D     lt input type number step 1   gt  Step 1  default  lt br   gt  x000D     lt input type number step 0 01   gt  Step 0 01 lt br   gt  x000D     lt input type number step any   gt  Step any lt br   gt  x000D     lt input type range step 20   gt  Step 20 lt br   gt  x000D     lt input type datetime-local step 60   gt  Step 60  default  lt br   gt  x000D     lt input type datetime-local step 1   gt  Step 1 lt br   gt  x000D     lt input type datetime-local step any   gt  Step any lt br   gt  x000D     lt input type datetime-local step 0 001   gt  Step 0 001 lt br   gt  x000D     lt input type datetime-local step 3600   gt  Step 3600  1 hour  lt br   gt  x000D     lt input type datetime-local step 86400   gt  Step 86400  1 day  lt br   gt  x000D     lt input type datetime-local step 70   gt  Step 70  1 min  10 sec  lt br   gt  x000D   lt  form gt  x000D   x000D   x000D      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

User · Answer

I have started using inputmode  quot decimal quot  which works flawlessly with smartphones   lt input type  quot text quot  inputmode  quot decimal quot  value  quot 1 5 quot  gt  Note that we have to use type  quot text quot  instead of number  However  on desktop it still allows letters as values  For desktop you could use   lt input type  quot number quot  inputmode  quot decimal quot  gt  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  quot text quot  if you have international users on your website   You can try this on desktop  also with Numpad  and your phone   x000D   x000D   lt p gt Input with type text  lt  p gt   lt input type  text  inputmode  decimal  value  1 5  gt   lt br gt   lt p gt Input with type number  lt  p gt   lt input type  number  inputmode  decimal  value  1 5  gt  x000D   x000D   x000D    Reference  https   developer mozilla org en-US docs Web HTML Global attributes inputmode

User · Answer

Based on this answer   lt input type  text  id  sno  placeholder  Only float with dot          onkeypress  return  event charCode  gt   48  amp  amp  event charCode  lt   57          event charCode    46    event charCode    0   gt    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    amp  amp  is AND      is OR operator   if you try float with comma     lt input type  text  id  sno  placeholder  Only float with comma            onkeypress  return  event charCode  gt   48  amp  amp  event charCode  lt   57            event charCode    44    event charCode    0   gt    Supported Chromium and Firefox  Linux X64  other browsers I does not exist

User · Answer

You can use the step attribute to the input type number    lt input type  number  id  totalAmt  step  0 1  gt  lt  input gt    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

User · Answer

lt input type  quot number quot  step  quot any quot  gt   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  quot 0 01 quot  will accept only two decimal points

User · Answer

Using React on my IPad  type  quot number quot  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   lt input   className  quot center-align quot    type  quot text quot    pattern  quot    0-9  0 2       0-9  0 2    0-9  0 5    quot    step  quot any quot    maxlength  quot 7 quot    validate  quot true quot    gt

User · Answer

You can use    lt input type  number  step  any  min  0  max  100  value  22 33  gt

User · Answer

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

User · Answer

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       lt input type  number  step  any    gt      Works for me in Chrome  not tested in other browsers

User · Answer

I do so     lt 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  gt    then  I define min in 0 4 and max in 0 7 with step 0 01  0 4  0 41  0 42     0 7

User · Answer

This topic  e g  step  quot 0 01 quot   relates to stepMismatch and is supported by all browsers as follows

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

Examples related to html

Examples related to input

Examples related to floating-point