html5 input for money/currency
I seem unable to work out what to use for accepting monetary values on a form.
I have tried...
<input type="number" min="0" max="10000" step="1" name="Broker_Fees" id="broker_fees" required="required">
But that then won't allow for pence entries.
I want the incremental button control to go up in pounds, but still want the ability to enter pence.
Who would want to use an incremental button that moved 1p at a time?
Perhaps I'm using the wrong control , but I can't find a money/currency control?
Can someone please advise the best way to accept monetary values (including commas, decimal places and currency symbol) using HTML5?
Thanks, 1DMF
Answer
Enabling Fractions/Cents/Decimals for Number Input
In order to allow fractions (cents) on an HTML5 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.