HTML에서 <input> 태그는 사용자로부터 입력값을 받을 때 사용됩니다. 입력 필드에 허용 범위를 지정하려면 min 속성과 max 속성을 활용하면 됩니다.
min 속성은 입력 필드에 허용되는 최솟값을, max 속성은 최댓값을 각각 지정합니다. 사용자가 이 범위를 벗어나는 값을 입력하면 폼 제출 시 브라우저가 자동으로 유효성 검사를 수행하여 오류 메시지를 표시합니다.
min 및 max 속성이 적용되는 입력 타입
min과 max 속성은 다음과 같은 입력 타입에서 사용할 수 있습니다.
- number (숫자)
- range (범위 슬라이더)
- date (날짜)
- datetime / datetime-local (날짜 및 시간)
- month (월)
- time (시간)
- week (주)
예제 코드
아래 코드는 1부터 10 사이의 숫자만 입력할 수 있도록 입력 필드에 제한을 설정하는 예제입니다.
<!DOCTYPE html> <html> <head> <title>HTML input number</title> </head> <body> <form action = "" method = "get"> 1부터 10 사이의 숫자를 입력하세요 <input type="number" name="num" min="1" max="10"><br> <input type="submit" value="Submit"> </form> </body> </html>
실행 결과 설명
위 예제에서는 type="number"로 지정된 입력 필드에 min="1"과 max="10" 속성이 적용되어 있습니다. 따라서 사용자가 0 이하 또는 11 이상의 값을 입력한 상태로 폼을 제출하면, 브라우저가 해당 값을 허용하지 않고 범위 내의 값을 입력하도록 안내합니다.
참고로 min과 max 속성은 브라우저 기본 유효성 검사에 의존하기 때문에, 보안이 중요한 서비스라면 서버 측에서도 반드시 값의 범위를 다시 검증하는 것이 좋습니다.