HTML step 속성이란?
HTML input 요소의 step 속성은 사용자가 입력할 수 있는 숫자의 유효한 간격을 설정합니다. 예를 들어 step 값이 4라면 0, 4, 8, 12, 16처럼 4씩 증가하는 숫자만 유효한 입력으로 인정됩니다.
또한 step 속성은 min(최솟값)과 max(최댓값) 속성과 함께 사용하면 유효한 값의 범위를 더욱 정교하게 제어할 수 있습니다.
예제
다음 코드를 실행하면 input의 step 속성으로 숫자 간격을 만드는 방법을 직접 확인할 수 있습니다. 여기서는 step 값을 4로 설정했으므로 4, 8, 12, 16 등의 숫자만 유효한 입력이 됩니다. 이 외의 숫자를 입력한 후 제출 버튼을 누르면 "Please enter a valid value(유효한 값을 입력해 주세요)"라는 오류 메시지가 표시되며, 브라우저는 가장 가까운 두 개의 유효한 값도 함께 안내해 줍니다.
<!DOCTYPE html> <html> <head> <title>HTML input step attribute</title> </head> <body> <form action = "/cgi-bin/hello_get.cgi" method = "get"> <input type = "number" name = "points" step = "4"><br> <input type = "submit" value = "Submit"> </form> </body> </html>
참고 사항
- step="any"로 설정하면 소수점을 포함한 모든 숫자를 제한 없이 입력할 수 있습니다.
- step 속성은 type="number", type="range", type="date" 등의 입력 유형에서 동작합니다.
- min 속성과 함께 사용할 경우, 유효한 값은 min 값부터 step 간격만큼 증가한 숫자들입니다.