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"andmax="99"as boundsstep="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