YouTip

# HTML `step` Attribute The `step` attribute specifies the legal number intervals for an `` element. It controls the granularity of the input value and dictates which values are considered valid upon form submission. --- ## Quick Example Below is an HTML form with an input field that only accepts numbers in increments of 3: ```html

Points:

``` --- ## Definition and Usage The `step` attribute defines the stepping interval for the input value. For example, if `step="3"`, the allowed values are `-3`, `0`, `3`, `6`, `9`, and so on. ### Key Features: * **Validation:** If a user enters an invalid value (e.g., `4` when `step="3"` and the base is `0`), the browser will block form submission and display a validation error. * **UI Controls:** For input types like `number` or `range`, the browser provides up/down spinner arrows or a slider handle. Clicking these controls will increment or decrement the value by the specified `step` amount. * **Combination with Min/Max:** The `step` attribute is often used in conjunction with the `min` and `max` attributes to establish a strict range of valid values. --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | `number` | A positive floating-point number that defines the step interval (e.g., `1`, `0.5`, `100`). | | `any` | Disables step validation, allowing any decimal or integer value within the range. | --- ## Supported Input Types The `step` attribute is not universal. It is only supported on the following `` types: * `number` * `range` * `date` * `datetime-local` * `month` * `time` * `week` --- ## Browser Support The numbers in the table specify the first browser version that fully supports the `step` attribute: | Attribute | Chrome | Edge | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`step`** | 6.0 | 10.0 | 16.0 | 5.0 | 10.6 | --- ## Practical Examples ### 1. Decimal Steps (Currency/Measurements) If you want users to enter prices in increments of $0.25: ```html Price (USD): ``` ### 2. Range Slider with Custom Intervals Create a slider that moves in increments of 10, ranging from 0 to 100: ```html Volume: ``` ### 3. Time Input with Seconds By default, the `` element steps by minutes (60 seconds). To allow users to select seconds, set the step to `1` (1 second) or `15` (15-second intervals): ```html Choose Time (15-second intervals): ``` --- ## Important Considerations 1. **Base Value Calculation:** The step sequence starts from the `min` attribute value. If no `min` attribute is specified, it defaults to `0` or the default initial value of the input type. For example: * `` allows: `1`, `3`, `5`, `7`... * `` allows: `2`, `4`, `6`, `8`... 2. **The `any` Value:** If you want to allow users to type any decimal value in a `number` input without triggering validation errors, use `step="any"`. 3. **HTML5 Feature:** The `step` attribute was introduced in HTML5. It is not supported in legacy HTML 4.01 or XHTML specifications.