Min, max and step

Bound and step numeric inputs with min, max and step.

min and max on numeric fields

An input with type="number" takes a numeric value. The min attribute sets the smallest accepted value, max the largest. For an age field you'd write min="18" max="120", and the browser rejects values below 18 or above 120. This blocks illogical entries before the form submits and guides the user to the right range.

Setting the stride with step

The step attribute sets the increment. On a quantity field, step="1" accepts only whole numbers; step="0.01" accepts two decimal places. The same attribute gives a day step on type="date" or a second step on type="time". Together min, max and step pin down how a numeric field behaves.

Exercise Add a quantity field to the order form

Add a quantity field to the order form below. It must carry:

type="number"
min="1" and max="99" as bounds
step="1" so only whole numbers are accepted
A <label> with matching for↔id

Show example solution

<form action="/order" method="post">
  <label for="qty">Quantity</label>
  <input type="number" id="qty" min="1" max="99" step="1">
</form>

Test yourself

What does step="10" do on a number input?
```
<input type="number" min="0" max="100" step="10">
```
- Allow at most 10 values
- Make values jump in steps of 10
- Make the field 10 characters wide
- Create 10 inputs
Show answer

Make values jump in steps of 10 — Correct. step="10" makes values jump in steps of 10 (0, 10, 20, ...).

Complete the upper bound of the age field

<input type="number" min="18" ____ step="1">

Show answer

<input type="number" min="18" max="120" step="1">

Match each numeric attribute to its meaning

min

Smallest value
max

Largest value
step

Increment
type="number"

Numeric input

Next lesson: Minlength and maxlength

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies