CodesBeautify

HTML Number Input Generator

Generate a number field with min, max and step values that validate the way you expect.

HTMLrange 1 to 10
<label for="quantity">Quantity</label>
<input type="number" id="quantity" name="quantity" value="1" min="1" max="10" step="1">
Runs locally in your browser

About the HTML Number Input Generator

An <input type="number"> gives you spinner arrows, a numeric keyboard on mobile and validation against min, max and step. The attribute that causes silent rejections is step. It defaults to 1, which means any decimal is invalid, so a price field that refuses 19.99 with no visible message almost always needs step="0.01" or step="any".

Step is also measured from a base value, which is min when you set one and zero otherwise. With min="1" and step="2" the valid numbers are 1, 3, 5 and so on, not the even numbers, and that offset catches people out when they combine the two attributes without thinking about the starting point.

The generator validates its own inputs, so it will not hand you markup whose default value sits outside the range or whose minimum is above its maximum. A few other behaviours are worth knowing. Reading input.value in JavaScript returns a string, and an entry the browser considers invalid comes back as an empty string rather than the characters typed, so use valueAsNumber when you want a number. The spinner arrows are easy to nudge accidentally on a laptop trackpad, so for identifiers such as a phone number or a card number use type="text" with inputmode="numeric" instead, which keeps the numeric keypad without the arrows or the leading zero stripping. To convert a range of values between bases or units afterwards, try the Number Base Converter.

How to use

  1. Set the label and field name.
  2. Enter the minimum, maximum and starting value.
  3. Set step to 0.01 for money or any to allow free decimals.
  4. Copy the labelled input into your form.

Common questions

Why does my price field reject 19.99?
Step defaults to 1, so decimals are invalid. Set step="0.01" for currency or step="any" to allow any decimal.
Why are even numbers invalid with min 1 and step 2?
Step counts from min, so the valid values are 1, 3, 5 and upwards. Set min to 0 if you want the even numbers.
Why does reading the value give me an empty string?
When the browser considers the entry invalid it returns an empty string. Use valueAsNumber, and check validity before reading.
Should I use a number input for a phone number?
No. It strips leading zeros and offers spinners nobody wants. Use type="text" with inputmode="numeric" or type="tel".