HTML input 태그의 max 속성 – 입력값 최대 범위 설정 방법

HTML <input> 태그의 max 속성이란?

<input> 요소의 max 속성은 해당 입력 필드에 허용되는 최댓값을 지정하는 역할을 합니다. 이 속성은 HTML5에서 새롭게 도입되었으며, min 속성과 함께 사용하면 number(숫자), date(날짜), datetime(날짜·시간), range(범위) 등 다양한 입력 유형에서 값의 유효 범위를 손쉽게 설정할 수 있습니다.

예를 들어 ID 입력란의 max 값을 10으로 설정하면, 사용자는 10보다 큰 숫자를 입력할 수 없습니다.

max 속성 구현 예제

아래는 로그인 폼에 max 속성을 적용한 실제 코드입니다. ID 필드에는 최솟값 1, 최댓값 10을 지정하여 입력 범위를 제한했습니다.

<!DOCTYPE html>
<html>
<body>
<h2>Log in to your account</h2>
<form action="" method="get">
   Id − <input type="number" name="id" min="1" max="10"><br>
   Password − <input type="password" name="pwd"><br>
   DOB − <input type="date" name="dob" autofocus><br>
   <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

실행 결과

HTML input 태그의 max 속성 – 입력값 최대 범위 설정 방법

위 예제에서는 여러 개의 입력 필드와 제출 버튼으로 구성된 폼을 생성했습니다.

<form action="" method="get">
   Id − <input type="number" name="id" min="1" max="10"><br>
   Password − <input type="password" name="pwd"><br>
   DOB − <input type="date" name="dob" autofocus><br>
   <button type="submit" value="Submit">Submit</button>
</form>

여기서 핵심은 ID 입력 필드(type="number")에 max 속성이 적용되었다는 점입니다. 최댓값이 10으로 설정되어 있으므로, 사용자가 10을 초과하는 값을 입력하려고 하면 브라우저가 자동으로 이를 막아줍니다.

Id − <input type="number" name="id" min="1" max="10">

마무리 정리

max 속성은 브라우저 차원에서 폼 유효성 검사를 수행해 주기 때문에, 별도의 자바스크립트 코드 없이도 잘못된 입력값을 사전에 차단할 수 있습니다. min 속성과 함께 활용하면 더욱 견고하고 안전한 입력 검증 환경을 구축할 수 있으니, 숫자나 날짜 입력 폼을 만들 때 꼭 기억해 두세요.