How to Create the Currency Input in HTML

An HTML number field can accept a numeric amount, enforce range constraints, and display a chosen number of decimal places after the value changes. HTML has no built-in currency input type, though: adding type="number" does not add a currency symbol, digit grouping, or locale-aware formatting. The example below uses HTML for numeric input and jQuery to clamp and round its value.

Why type="number" is not a currency format

<input type="number"> gives the browser a numeric control. Its min, max, and step attributes describe acceptable numeric values, and the browser may provide number-entry controls. They do not define how money should look. A value such as 99.9 remains a number without a currency sign or locale-specific separators.

Use this control when users should enter a number and a range is useful. For a localized display such as a currency symbol and grouping separators, format the value separately, for example with JavaScript’s Intl.NumberFormat. Formatting a number for display is also separate from storing or validating monetary amounts accurately; financial calculations often use integer minor units or a decimal arithmetic library.

Build a numeric input with range and precision requirements

The following attributes provide a starting value and illustrative minimum and maximum values. Change them to match the application’s requirements. step="any" allows decimal values that would otherwise fail the number input’s default step constraint of one; it does not itself round values to one decimal place.

<input
  type="number"
  id="currencyInput"
  min="0.1"
  max="5000000.0"
  step="any"
  value="99.9"
/>

JavaScript can clamp a finite number to those bounds and use the toFixed() method with 1 to produce a string with one digit after the decimal point. This example was executed and printed 1234.6:

const min = 0.1;
const max = 5000000.0;
const entered = 1234.56;
const bounded = Math.min(max, Math.max(min, entered));
console.log(bounded.toFixed(1));

1234.6

Handle changes with JavaScript and jQuery

The change event runs after the user changes the field and commits that change, commonly by leaving the control. It is not necessary to press Enter. Use the input event instead if the interface should respond as the user edits. For a number input, valueAsNumber gives a number, or NaN when the field has no usable numeric value. Check that value before clamping so the handler does not replace an unfinished or cleared field with a bound.

The handler below reads min and max from the input, leaves a non-finite value alone, clamps a finite value, then writes the one-decimal string back. toFixed(1) rounds to the nearest tenth and returns a string; it does not always round upward. The result is a numeric string, not currency formatting.

Use the complete currency input example

This browser-page example assumes jQuery is loaded by the page. The custom plugin attaches one handler to each selected input. The snippet keeps the same illustrative range and initial value as above.

<input
  type="number"
  id="currencyInput"
  min="0.1"
  max="5000000.0"
  step="any"
  value="99.9"
/>

<script>
  $.fn.currencyInput = function () {
    return this.on("change", function () {
      const value = this.valueAsNumber;
      if (!Number.isFinite(value)) return;

      const min = Number.parseFloat($(this).attr("min"));
      const max = Number.parseFloat($(this).attr("max"));
      const bounded = Math.min(max, Math.max(min, value));
      $(this).val(bounded.toFixed(1));
    });
  };

  $(function () {
    $("#currencyInput").currencyInput();
  });
</script>

When the page loads, the field initially displays 99.9. After a committed change, a finite value below the minimum is set to 0.1, and one above the maximum is set to 5000000.0. A value within the range is rounded to one decimal place. The code does not change the value while the user is typing because it listens for change.

Know what the example does and does not validate

The HTML constraints help the browser identify values outside the allowed range, while the handler explicitly clamps finite values when a change is committed. A blank or non-finite value is left untouched for the user to correct; this example does not make the field required. If the application needs to reject such a value, add a separate validation message and prevent submission until the input is valid.

This behavior does not guarantee that submitted data is valid or trustworthy. Validate the value again on the server, and apply the application’s monetary precision and rounding rules there. toFixed(1) is appropriate here to demonstrate one-decimal numeric presentation, but it does not add a currency symbol, group digits, select a locale, or provide a complete financial representation.