HTML의 step 속성은 입력 필드에 허용되는 숫자의 간격(증가 단위)을 지정합니다. 예를 들어 step 값을 5로 설정하면 0, 5, 10, 15, 20처럼 5씩 증가하는 값만 유효한 입력으로 인식됩니다.
step 속성은 min(최솟값)과 max(최댓값) 속성과 함께 사용하면 특정 범위 내에서 일정한 간격을 가진 유효한 값만 입력받도록 제한할 수 있습니다. 이는 폼 유효성 검사를 브라우저 차원에서 자동으로 처리해 주기 때문에 별도의 JavaScript 코드 없이도 잘못된 입력을 방지할 수 있습니다.
step 속성 활용 예제
아래 코드는 input 요소에 step 속성을 적용하여 5 단위로 숫자를 입력받는 예제입니다. step이 5로 설정되어 있으므로 5, 10, 15, 20 등의 값만 유효하게 처리됩니다.
만약 사용자가 5의 배수가 아닌 다른 숫자(예: 7)를 입력하고 제출 버튼을 누르면, 브라우저는 "유효한 값을 입력해 주세요"라는 오류 메시지를 표시하며, 동시에 입력 가능한 가장 가까운 두 개의 유효한 값(예: 5와 10)까지 안내해 줍니다.
<!DOCTYPE html> <html> <head> <title>HTML input step 속성</title> </head> <body> <form action = "" method = "get"> <input type="number" name="points" step="5"><br> <input type="submit" value="Submit"> </form> </body> </html>
참고 사항
step 속성은 <input type="number">, <input type="range">, <input type="date">, <input type="time"> 등 다양한 입력 유형에서 사용할 수 있습니다. 소수점 단위로 간격을 설정하고 싶다면 step="0.01"처럼 소수 값을 지정할 수도 있으며, 어떤 값이든 허용하려면 step="any"를 사용하면 됩니다.