A number input accepts a quantity; min, max, and step describe its allowed range and increment. They are browser constraints, not a database rule.
Make this comfortable
HTML number boundaries: align min, max, and step with the real unit
Use the contract
An inspection scale records parcel weight in quarter-kilogram increments from 0.25 through 12 kilograms. State the unit in the label. With min set to 0.25 and step set to 0.25, 2.75 is valid while 2.85 has a step mismatch. The minimum also becomes the step base. An empty field still needs required if the value is mandatory. If weight must be more precise than the scale can report, change the business rule first; a smaller step does not create measurement accuracy. This control is for a numeric quantity, unlike a parcel identifier that merely contains digits.
<form action="/parcels/measure" method="post">
<label for="parcel-weight">Measured weight in kilograms</label>
<input id="parcel-weight" name="weight_kg" type="number"
min="0.25" max="12" step="0.25" value="2.75" required>
<button type="submit">Record weight</button>
</form>Behavior and cost
The browser can reject a value before submission, but a crafted request can bypass every attribute. Recheck the range and increment on the server using decimal arithmetic suited to the stored unit. Do not rely on binary floating-point equality for money or measured increments. Native validation has negligible download cost; the maintenance cost is keeping the HTML, server rule, and equipment calibration in agreement. Test the lower edge, upper edge, one step outside each edge, an empty value, and a value such as 2.85 that sits inside the range but off the increment grid.
Common Mistakes
- Do not use type=number for codes, telephone numbers, or values with significant leading zeroes.
- Do not assume max or step makes the server safe from altered requests.
- Do not forget that min changes where the step grid starts.
Connected lessons
html