type="number" 속성으로 숫자 입력 제한하기
HTML 입력 상자가 숫자만 입력받도록 제한하려면 <input type="number">를 사용하면 됩니다. 이 타입을 지정하면 브라우저가 자동으로 숫자 전용 입력 필드를 생성해 주며, 모바일 기기에서는 화면에 숫자 키패드가 표시되어 편리합니다.
입력값을 숫자로 제한한 상태에서 사용자가 문자를 입력하고 제출 버튼을 누르면, 브라우저의 기본 유효성 검사가 동작하여 다음과 같은 안내 메시지가 나타납니다. "Please enter a number."(숫자를 입력해 주세요)
주요 속성 정리
- min: 입력할 수 있는 최솟값을 지정합니다.
- max: 입력할 수 있는 최댓값을 지정합니다.
- step: 허용되는 숫자의 간격(증감 단위)을 지정합니다. 예를 들어 step="5"로 설정하면 0, 5, 10처럼 5의 배수만 유효한 값으로 인정됩니다.
예제
아래 코드를 실행하면 1부터 20 사이의 숫자만 입력할 수 있는 입력 상자를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML input number</title> </head> <body> <form action = "" method = "get"> Enter any number between 1 to 20: <input type="number" name="num" min="1" max="20"><br> <input type="submit" value="Submit"> </form> </body> </html>
참고: type="number"를 통한 유효성 검사는 브라우저 차원에서 이루어지므로, 보안이 중요한 데이터라면 서버 측에서도 반드시 한 번 더 입력값을 검증하는 것이 좋습니다.