정의 및 사용 방법

step 속성은 사용자가 단계별로 입력하거나 선택할 수있는 <input> 태그의 일부 유형에서, 입력 가능한 값의 간격(step)을 지정합니다.

이 속성이 설정되면, 사용자는 해당 컨트롤이 제공하는 인터페이스를 통해 지정된 간격(step)으로 값을 입력하거나 선택할 수 있습니다.
브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 값이 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

기본 예제

다음은 단계별로 숫자를 입력하거나 선택할 수 있는 <input type="number">에서, 입력 가능한 값의 간격을 step="2"로 지정하여 숫자가 2씩 증가하거나 감소하도록 설정한 예제입니다.

HTML 
<label for="step-example">2 단위로 입력:</label>
<input type="number" id="step-example" value="0" step="2">
실제 적용된 모습 해당 요소에 마우스 커서를 올려 이 컨트롤이 제공하는 인터페이스인 화살표(스피너)를 사용해 숫자를 올리거나 내려보세요.
숫자가 2씩 증가하거나 감소합니다.

step 속성이 사용 가능한 요소

step 속성은 모든 요소에 적용할 수 있는 글로벌 속성이 아닙니다.
<input> 태그의 일부 유형에서 사용가능합니다.

사용자가 단계별로 입력하거나 선택할 수 있는 다음의 유형들에서만 적용됩니다.

값

step 속성의 값은 0보다 큰 소수점을 포함한 숫자 또는 특별한 의미의 값인 any를 사용할 수 있습니다.

기본값

step 속성은 사용이 가능한 <input> 유형별로 값을 지정하지 않았을 때 적용되는 기본값이 있습니다.
유형별로 의미하는 값은 다음과 같습니다.

주요 브라우저 중에서 일부 브라우저가 지원하지 않는 <input type="month">와 <input type="week">는 포함시키지 않았습니다.

<input> 유형별 step 속성의 기본값
유형 기본값 실제 적용된 모습
date 1
(일 단위 간격)		 <input type="date" step="1">
time 60
(초 단위 간격)		 <input type="time" step="60">
datetime-local 60
(초 단위 간격)		 <input type="datetime-local" step="60">
number 1
(정수 단위 간격)		 <input type="number" step="1">
range 1
(정수 단위 간격)		 <input type="range" step="1">

step="any"

step="any"가 지정되면, 입력 가능한 값의 간격(step)에 제한이 없음을 의미합니다. 대소문자는 구분하지 않습니다.
사용자에게는 해당 유형에서 제공하는 인터페이스의 기본 간격(step)이 적용되지만, 브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 값이 지정된 간격과 일치하는지 유효성 검사를 시행하지 않습니다.

step 속성의 간격 기준(Step Base)

step 속성은 해당 요소의 입력 가능한 값의 간격(step)을 지정합니다. 브라우저는 **간격 기준(Step Base)**이라는 내부 알고리즘을 기준으로 step 속성으로 지정된 간격을 조정합니다.

**간격 기준(Step Base)**은 다음과 같습니다.

  1. min 속성이 있는 경우
    min 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다.
  2. value 속성이 있는 경우
    value 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다. 단, 유효한 min이 설정되어 있다면 min 속성의 값을 기준으로 간격이 조정됩니다.
  3. min, value 속성이 둘 다 없을 경우
    <input> 유형에서 기본 간격 기준(Step Base)이 정의되어 있으면 그 값을 기준으로 사용합니다.
    기본 간격 기준이 정의되지 않으면, 기준 없이 해당 <input> 유형 상태(State)에 맞춰 간격이 조정됩니다.

이러한 간격 기준에 따라, 사용자는 해당 컨트롤이 제공하는 인터페이스를 통해 지정된 간격(step)으로 값을 입력하거나 선택할 수 있으며, 브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 값이 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

소수점 사용하기

step 속성의 값으로 0보다 큰 소수점을 사용할 수 있습니다.

<input> 유형 중에서 소수점으로 step 속성의 값을 지정할 수 있는 것은 다음 두 개의 유형입니다.

이 두 유형의 기본값이 모두 step="1"이라는 점을 고려할 때 소수점 값은 입력하거나 선택하는 값을 세밀하게 조정할 때 사용한다는 것을 알 수 있습니다.

그 밖의 유형은 step 속성의 값으로 소수점을 허용하지 않습니다.

소수점을 사용한 step 속성의 예제

다음은 <input type="number">에서 소수점을 사용한 step 속성의 예제입니다.
소수점을 사용하려면 아래의 예제와 같이 step 속성의 값을 소수점이 있는 숫자로 지정하면 됩니다. 이때, 사용자에게 입력하는 값이 소수점 단위라는 점을 시각적으로 표현하기 위해서 초깃값을 지정하는 value 속성의 값에도 소수점을 포함했습니다.

HTML 
<label for="number-to-show">표시할 번호</label>
<input type="number" id="number-to-show" value="7.0" step="0.1">
브라우저에서 실제 표시된 모습 해당 요소에 마우스 커서를 올려 이 컨트롤이 제공하는 인터페이스인 화살표(스피너)를 사용해 숫자를 올리거나 내려보세요.
숫자가 0.1씩 증가하거나 감소합니다.

추가 예제와 관련 설명

다음은 앞서 다루지 않은 step 속성이 사용 가능한 모든 <input> 유형에 대한 추가 예제와 관련 설명입니다.

<input type="date">

다음은 <input type="date">에 step="2"가 지정된 예제입니다.

이 유형에서는 step 속성에 지정하는 값이 날짜 간격으로 작용합니다. 예를 들어, step="1"은 1일 간격으로 날짜를 조정하며, step="2"로 설정하면 2일 간격으로 날짜를 선택할 수 있습니다. 사용자가 달력 인터페이스를 통해 날짜를 선택할 때, 2일 간격으로 날짜를 지정할 수 있는 모습을 확인해보세요.

HTML 
<label for="user-date">날짜 선택</label>
<input type="date" id="user-date" value="2024-10-17" step="2">
브라우저에서 실제 표시된 모습

<input type="time">

다음은 <input type="time">에 step="120"이 지정된 예제입니다.

HTML 
<label for="user-time">시간 선택</label>
<input type="time" id="user-time" value="09:30" step="120">

<input type="time">에서 step="1"은 1초 단위 간격을 의미합니다. 따라서 step="120"은 120초(2분) 단위 간격을 의미하지만, 실제 브라우저의 인터페이스에서는 2분 단위로 정확히 선택할 수 없을 수도 있습니다.

브라우저에서 실제 표시된 모습

<input type="time">에서 대부분의 브라우저는 step 값을 60으로 나누었을 때 나머지가 발생(정수가 아닌 소수 포함)하면 초 단위로, 나머지가 없으면 분 단위로 간격을 제공합니다. 즉, step 값이 60의 배수일 경우 1분 단위로만, 그 외의 경우 1초 단위로만 간격이 설정됩니다. 하지만, 브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 값이 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

HTML 
<label for="user-time-1">분 단위까지 선택</label>
<input type="time" id="user-time-1" step="120"> <!-- 120은 60의 배수 -->
<hr>
<label for="user-time-2">초 단위까지 선택</label>
<input type="time" id="user-time-2" step="1"> <!-- 1은 60으로 나누었을 때 나머지가 발생 -->
실제 적용된 모습

<input type="datetime-local">

다음은 <input type="datetime-local">에 step="120"이 지정된 예제입니다.

HTML 
<label for="user-datetime">날짜와 시간 선택</label>
<input type="datetime-local" id="user-datetime" step="120">

<input type="datetime-local">도 앞서 살펴본 <input type="time">과 마찬가지로 step="1"은 1초 단위 간격을 의미합니다. 따라서 step="120"은 120초(2분) 단위 간격을 의미하지만, 실제 브라우저의 인터페이스에서는 2분 단위로 정확히 선택할 수 없을 수도 있습니다.

브라우저에서 실제 표시된 모습

<input type="datetime-local">에서도 <input type="time">과 마찬가지로 대부분의 브라우저는 step 값을 60으로 나누었을 때 나머지가 발생(정수가 아닌 소수 포함)하면 초 단위로, 나머지가 없으면 분 단위로 간격을 제공합니다. 즉, step 값이 60의 배수일 경우 1분 단위로만, 그 외의 경우 1초 단위로만 간격이 설정됩니다. 하지만, 브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 값이 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

HTML 
<label for="user-time-1">분 단위까지 선택</label>
<input type="datetime-local" id="user-time-1" step="120"> <!-- 120은 60의 배수 -->
<hr>
<label for="user-time-2">초 단위까지 선택</label>
<input type="datetime-local" id="user-time-2" step="1"> <!-- 1은 60으로 나누었을 때 나머지가 발생 -->
실제 적용된 모습

<input type="range">

다음은 <input type="range">에 step="25"가 지정된 예제입니다.

HTML 
<label for="volume">볼륨</label>
<input type="range" id="volume" min="0" max="100" step="25">
실제 적용된 모습

브라우저 호환성

step 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
step 5 12 16 5

명세서

step 속성의 명세서 사양
명세서 사양
step HTML
#attr-input-step

참고문헌

같이 보기