In this section, we will learn what the step attribute is and how to use it.

What is step Attribute in HTML <input> Tag?

Consider an <input> element of type range. This input element has a control button that you can move to left and right in order to increase or decrease the number of that range element.

Every time you change the control range, the value changes by ONE step at a time.

Basically, the step here describes the interval between the current value and the next one!

By default, the step is set to one. That means if the first value is 0, for example, then increasing value of the target <input> element one step will result to 1 (again because the step or the interval is set to one).

Now the step attribute is here to change the default interval if we want! The value we set for this attribute is a number which describes the interval for each move (the distance from the current value and the next or previous one) of the target <input> element.

For example, let’s say the value of the `set` attribute is set to 3, that means if the current value of the target input element is set to 0 and we increase the value of that input element by one step, the next value we get is 3 instead of 1.

Note: The following <input> elements are capable of using the `step` attribute: number, range, date, datetime-local, month, time and week.

HTML step Attribute in <input> Tag Syntax:

<input type = “type” step = “number-value”>

<input> Tag step Attribute Values

The value of the `step` attribute is a number that specifies the interval distance from one value to another.

Example: using step attribute in HTML <input> tag

See the Pen using step attribute in HTML <input> tag by Omid Dehghan (@odehghan) on CodePen.

Here, the value set for `step` attribute is set to 5. This means every time we change the controller of the range element by one step, the current value will be increased or decreased by 5.