HTML에서 입력 필드에 허용되는 숫자 간격을 지정하려면 step 속성을 사용합니다. step 속성은 숫자 입력 필드(type="number")에서 유효한 값의 증가 단위를 정의합니다. 예를 들어 step 값을 5로 설정하면 0, 5, 10, 15, 20처럼 5씩 증가하는 값만 입력할 수 있습니다.
step 속성은 min(최솟값) 및 max(최댓값) 속성과 함께 사용하여 유효한 값의 범위를 더욱 정교하게 제한할 수 있습니다.
기본 문법
<input type="number" name="points" step="5">
예제
다음 코드를 실행하면 step 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML input step attribute</title>
</head>
<body>
<form action = "" method = "get">
<input type = "number" name = "points" step = "5"><br>
<input type = "submit" value = "Submit">
</form>
</body>
</html>
코드 설명
- type="number": 숫자만 입력할 수 있는 입력 필드를 생성합니다.
- step="5": 값이 5 단위로만 증가하거나 감소하도록 제한합니다. 화살표 버튼을 클릭하면 5씩 변하며, 그 외의 값은 유효성 검사에서 오류가 발생합니다.
- type="submit": 폼 데이터를 제출하는 버튼입니다.
min, max 속성과 함께 사용하기
min과 max 속성을 함께 사용하면 허용되는 값의 범위를 명확하게 지정할 수 있습니다.
<input type="number" name="points" min="0" max="50" step="5">
위 코드는 0부터 50 사이의 값 중에서 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50만 입력할 수 있도록 제한합니다. 이 외의 값(예: 7, 12)을 입력하고 폼을 제출하면 브라우저가 자동으로 유효성 검사 오류를 표시합니다.
참고로 step 속성은 소수 값도 지원합니다. 예를 들어 step="0.01"로 설정하면 금액 입력처럼 소수점 둘째 자리까지 허용하는 필드를 만들 수 있습니다.