HTML - step Attribute

HTML step attribute is used to set the interval between legal numbers or the distinct step size.

The step sets the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different data types. If not explicitly included, then the default value is set to 1 for number and range. The default stepping value for time is 1 second, with 900 begin equal to 15 minutes. For example; if step = "3", legal number could be -3, 0, 3, 6, etc.

Note: The step attribute works with the following input types: number, range, date, datetime-local, month, time, and week. And this attribute can be used together with the max and min attributes to create a range of legal values.

Syntax

<input step = "value" >

Applies on

The below-listed elements allow the use of the HTML step attribute.

Element	Description
<input>	HTML <input> tag is used to specify the input field.

Examples of HTML step Attribute

Bellow examples will illustrate the HTML step attribute, where and how we should use this attribute!

Define interval step with Numbers

In the following example we have created a input field where we can increase or decrease the number, but as we set the step="5", it will use 5 as an interval.

<!DOCTYPE html>
<html>

<head>
   <title>HTML step Attribute</title>
</head>

<body>
   <h2>HTML step Attribute</h2>
   <input type="number" name="tp" step="5"
          placeholder="multiples of 5">
</body>

</html>

Disable Specific Months using step Attribute

In the below code, the output window will display the input field applied with step attribute by 2 on the input type=month so the even months will be disabled.

<!DOCTYPE html>
<html>

<head>
   <title>HTML step Attribute</title>
</head>

<body>
   <h2>HTML step Attribute</h2>
   <input type="month" name="month" step="2" 
          placeholder="Month will step by 2">
</body>

</html>

Supported Browsers

Attribute
step	6.0	10.0	16.0	5.0	10.6

html_attributes_reference.htm