Thanks to visit codestin.com
Credit goes to www.cssportal.com

CSS Portal

HTML step Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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

Example

<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>

Browser Support

The following information will show you the current browser support for the HTML step attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.

This attribute is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 27th March 2024

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!