HTML step Attribute

Description

The HTML step attribute is used to control the granularity of value changes in input elements that allow for numeric or date/time values. It specifies the interval between legal numbers in an input field, essentially defining the amount and precision of valid increments or decrements when adjusting the value of the element. This attribute is particularly useful for <input> elements with types such as number, range, date, datetime-local, month, time, and week.

When the step attribute is applied, it determines how much the value should increase or decrease when the user interacts with input controls, like arrow buttons in a number input or the up and down keys. For example, if you set step="2" on a number input, the value will increase or decrease by 2 units with each step. If applied to a date input, step="7" would allow only dates that are a multiple of 7 days apart.

The attribute's value can be any positive floating point number, and there are special values like any, which allows for any numerical value, step-wise. Omitting the step attribute or setting it to its default value, which is 1, means the input will accept only whole numbers (for number) or single-step increments based on the input type (like one day for date, one second for time, etc.).

It's important to note that the step attribute works in conjunction with the min and value attributes to determine the range of acceptable values. The starting point for stepping (incrementing or decrementing) is defined by the min attribute if present, or the default value of the input type if not. If the user enters a value that does not fit the stepping constraint, the input will be considered invalid in forms.

Syntax

<input step="number | any">

Values

numberThe increment or decrement interval. A numeric value.
anyThe number input value may increase or decrease with no specific step value.

Applies To

The step attribute can be used on the following html elements.

<input>

Example

HTML

<form action="formscript.php">

  <label for="quantity">Quantity:</label><br>

  <input type="number" id="quantity" name="quantity" min="0" max="20" step="2"><br><br>

  <input type="submit" value="Submit">

</form>

Result

Editor