What problem are you trying to solve?

Using a number input type is hard for financial. Its name is not semantic. The step attribute also displays inconsistent fractional digits. It changes the display format. For example, increasing 1 step of step size 0.10 shows 10.1 instead of 10.10.

Problems & Use cases

• Based on existing user experience in the financial sector, the amount is typed using a numpad with a fixed decimal point. For example, 10.25 user has to type 1 0 2 5.
• Not only for banking. Accounting, payment, and others.
• Both cursor and number are aligned to the right side.
• Different use cases require different fractional digits. Some require 2, some 4 or more.
• A long number is hard to know its value at a glance without a separation space or symbol. 100000000000.00 vs 100 000 000 000.00
• 10.00 ≠ 10.00 if currency is different

Nice to have

• Type k or K to auto type 3 zeros
• Type m or M to auto type 6 zeros.
• Type - to change to negative
• Type + to change to positive
• Type = to reset, (same as using input type reset)

What solutions exist today?

I'm not sure what solution today that natively support. AFAIK, only custom solution.

How would you solve it?

I would separate structure into a few components.

• min -> lower bound of amount but higher than Long.MIN
• max -> higher bound of amount but lower than Long.MAX
• amount (long) -> 63bits for value, 1 bit for sign
• basis ->(10^x) where 0 ≤ x ≤ 10
• currency (ISO 4217)
• default -> a number, or null if not set

Use only a long data type (8 bytes) to store the number. Use basis as the divider for decimal digits. Use currency to display prefix (on the left side). The higher of basis, the lower of maximum amount. In other words, value=1230 with basis=100 means 12.30 in human readable format.

From my IDEA

Example of html tag

<input type="monetary" basis="10000" min="-10000" max="100000000000" currency="864" 
value="12345678900">

Example of UI

+----------------------+
|USD     1 234 567.8900|
+----------------------+

Anything else?

It would be great to add groups attribute to specification. The idea is to

• Allow JS to read values from all elements of the same group. The group name should be lower snake case alpha numeric. For example, interest, 2nd_step_fee, or outstanding_balance.
• Allow UI to show all other elements of the same group at once. For example, if I'm modifying a monetary element, all other elements within the same group should have a bold border so that user can see their relationship.
• I can choose whatever group name I want.

Another one is auto calculation function like SUM, AVG, PERCENTILE, MEDIAN; but this is low priority because Javascript can handle it. The idea is to have a cal attribute in HTML that users can type formulas like Excel, but values are a group name. For example cal="SUM(interest, fee)"

Edit 2025-07-24
When JavaScript gets a value from this element. I'd like to have an object with 3 components in order (amount, basis, currency) that I can use the object destructor to extract a specific value.

For the form submission, let discuss