html5 input for money/currency

by

Enabling Fractions/Cents/Decimals for Number Input

To allow fractions on an number input, you need to specify the step attribute to any:

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

This will specifically keep Chrome from displaying an error when a decimal/fractional currency is entered into the input. Mozilla, IE, etc… don’t error out if you forget to specify step="any". W3C spec states that step=”any” should, indeed, be needed to allow for decimals. So, you should definitely use it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step

Note that if you want the up/down buttons to do a specific granularity, then you must specify a numeric step such as “.01”.

Also, the number input is now pretty widely supported (>90% of users).

What Input Options are there for Money/Currency?

The title of the question has since changed and takes on a slightly different meaning. One could use both number or text input in order to accept money/decimals.

For an input field for currency/money, it is recommended to use input type of number and specify appropriate attributes as outlined above. As of 2020, there is not a W3C spec for an actual input type of currency or money.

Main reason being it automatically coerces the users into entering a valid standard currency format and disallows any alphanumeric text. With that said, you could certainly use the regular text input and do some post processing to only grab the numeric/decimal value (there should be server side validation on this at some point as well).

The OP detailed a requirement of currency symbols and commas. If you want fancier logic/formatting like that, (as of 2020) you’ll need to create custom JS logic for a text input or find a plugin.

More Related Contents:

  1. How to place elements like this
  2. Vertically center two elements within a div [duplicate]
  3. How to keep origin in center of image in scale animation?
  4. set content height 100% jquery mobile
  5. Is there a way to make HTML5 video fullscreen?
  6. Why is a div with “display: table-cell;” not affected by margin?
  7. Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)
  8. How to use radio buttons in ReactJS?
  9. How do I *really* justify a horizontal menu in HTML+CSS?
  10. Use Font Awesome icon as CSS content
  11. What is the use of style=”clear:both”?
  12. Android: How to use the Html.TagHandler?
  13. How to hide elements without having them take space on the page?
  14. Tri-state Check box in HTML?
  15. How to set name of file downloaded from browser?
  16. How can I put an input element on the same line as its label?
  17. Is inside block correct?
  18. How do I disable form fields using CSS?
  19. How do I export html table data as .csv file?
  20. Changing the text selection color using CSS?
  21. What is the max number of files to select in an HTML5 [multiple] file input?
  22. how to upload a file to my server using html
  23. ‘div’ inside ‘table’
  24. How to convert to px?
  25. How can I properly display German characters in HTML?
  26. Can I use an HTML input type “date” to collect only a year?
  27. align images side by side in html
  28. Removing the Bevel Effect on the Corner of Borders
  29. CSS class starting with number is not getting applied
  30. Are void elements and empty elements the same?

Leave a Comment