Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. HTML
  3. Reference
  4. Attributes
  5. step

HTML attribute: step

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Thestep attribute is a number that specifies the granularity that the value must adhere to or the keywordany. It is valid for the numeric input types, including thedate,month,week,time,datetime-local,number andrange types.

Thestep sets thestepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. If not explicitly included,step defaults to 1 fornumber andrange, and 1 unit type (minute, week, month, day) for the date/time input types. The value must be a positive number - integer or float — or the special valueany, which means no stepping is implied and any value is allowed (barring other constraints, such asmin andmax).

Only values which are a whole number of steps from the step base are valid. The step base ismin if specified,value otherwise, or0 if neither is provided (except forweek, which has a default step base of −259,200,000, representing the start of week1970-W01).

Syntax

Default values for step
Input typeValueExample
date1 (day)<input type="date" min="2019-12-25" step="1">
month1 (month)<input type="month" min="2019-12" step="12">
week1 (week)<input type="week" min="2019-W23" step="2">
time60 (seconds)<input type="time" min="09:00" step="900">
datetime-local60 (seconds)<input type="datetime-local" min="2019-12-25T19:30" step="900">
number1<input type="number" min="0" step="0.1" max="10">
range1<input type="range" min="0" step="2" max="10">

Ifany is not explicitly set, valid values for thenumber, date/time input types, andrange input types are equal to the basis for stepping - themin value and increments of the step value, up to themax value, if specified. The following example results in any even integer, 10 or greater, being valid:

html
<input type="number" min="10" step="2" />

Ifstep is omitted, any integer is valid but floats like 4.2 are not valid asstep defaults to 1. For 4.2 to be valid:

  • eitherstep would have to be set toany, 0.1, or 0.2,
  • or themin value would have to be a number ending in .2, such as 0.2, 1.2, or -5.2.

Examples

min impact on step

The value ofmin defines valid values, even if thestep attribute is not included. This is becausestep defaults to1 for thenumber input type.

In this example, we add a big red border around invalid inputs:

css
input:invalid {  border: solid red 3px;}

We then define an input with a minimum value of 1.2 and a step value of 2:

html
<input name="myNumber" type="number" step="2" min="1.2" />

Valid values include 1.2, 3.2, 5.2, 7.2, 9.2, 11.2, and so on. Only floats with an odd-numbered integer part and a decimal part of .2 are valid. The number spinner, if present, generates valid float values of 1.2 and greater, in increments of 2.

Note:When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the:invalid and:out-of-range pseudoclasses.

SeeClient-side validation andstepMismatch for more information.

Accessibility concerns

Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using themin attribute, ensure this minimum requirement is understood by the user. Providing instructions within the<label> may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider usingaria-labelledby oraria-describedby.

Specifications

Specification
HTML
# attr-input-step

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp