HTML에서 입력 필드에 허용되는 최댓값을 지정하려면 max 속성을 사용합니다. 이 속성은 주로 <input> 태그와 함께 사용되며, 숫자나 날짜 입력 시 사용자가 입력할 수 있는 상한선을 정해줍니다.
예를 들어, 숫자 입력 필드에서 최솟값이 1이고 최댓값이 10으로 설정되어 있다면, 사용자는 그 범위를 벗어나는 값을 입력할 수 없습니다. 폼 제출 시 브라우저가 자동으로 유효성을 검사하기 때문에 별도의 JavaScript 코드 없이도 간편하게 입력값을 제한할 수 있습니다.
max 속성 사용 예제
아래 코드는 숫자 입력 필드에 min과 max 속성을 적용하여 1부터 10 사이의 값만 입력받는 예제입니다.
<!DOCTYPE html> <html> <body> <form action=""> Rank: <input type = "number" name = "rank" min = "1" max = "10"><br> <input type = "submit"> </form> </body> </html>
주요 포인트
max속성은type="number",type="date",type="range"등 다양한 입력 유형에서 사용할 수 있습니다.min속성과 함께 사용하면 허용 가능한 값의 범위를 명확하게 지정할 수 있습니다.- 입력값이 범위를 벗어나면 브라우저가 기본 유효성 검사 메시지를 표시하여 잘못된 데이터 제출을 방지합니다.