References

Beginner-friendly references for web development, with live, editable examples.

The HTML step attribute

Attribute All modern browsers Updated
Quick answer

The HTML step attribute sets the granularity (allowed interval) of the value. It is used on the <input> element (number, range, date and time types).

Overview

The step attribute sets the value increment for numeric/date inputs. It is used on form controls such as <input>, <select> and <textarea>.

It is a form-control attribute: it configures how a control behaves, what it accepts, or its initial value, working alongside the control's <label> and parent <form>. Constraint attributes also feed the browser's built-in validation.

Syntax

<input type="number" step="0.5">

Values

Value
A positive number, or any.

Example

Live example
<input type="number" step="0.5" min="0" max="5" value="2.5" style="padding:8px;">

Best practices

  • Give every control a <label> so it has an accessible name.
  • Treat client-side constraints as a convenience — always validate again on the server, since they can be bypassed.
  • Choose the most specific input type so users get the right on-screen keyboard and built-in checks.
  • Keep the submitted name and value meaningful for whatever processes the form.

Frequently asked questions

What does the step attribute do?
Sets the value increment for numeric/date inputs.
Are HTML form attributes enough for validation?
They give instant feedback, but client-side checks can be bypassed, so always validate on the server too.
Do form controls still need a label?
Yes. Every control needs a <label> for an accessible name, whatever attributes you set.
Which elements use the step attribute?
It is an element-specific attribute, used on form controls such as <input>, <select> and <textarea>.