HTML min·max 속성이란?
HTML의 min과 max 속성은 요소가 가질 수 있는 최솟값과 최댓값을 지정하는 데 사용됩니다. 이 속성들을 활용하면 사용자가 허용된 범위를 벗어나는 값을 입력하지 못하도록 제한할 수 있으며, 브라우저의 기본 유효성 검사 기능과 함께 동작합니다.
min과 max 속성은 다음 세 가지 HTML 요소에서 사용할 수 있습니다.
| 번호 | 요소 | min 속성 | max 속성 |
| 1 | <input> | 지원 | 지원 |
| 2 | <meter> | 지원 | 지원 |
| 3 | <progress> | 지원 | 지원 |
요소별 활용 방법
1. <input> 요소
<input> 요소에서는 type="number", type="date", type="range", type="time" 등 숫자나 날짜를 다루는 입력 타입과 함께 min·max 속성을 사용할 수 있습니다. 예를 들어 나이 입력 필드에 min="1" max="100"을 지정하면 그 범위를 벗어난 값은 제출 시 브라우저가 자동으로 차단합니다.
2. <meter> 요소
<meter> 요소는 디스크 사용량, 투표 결과 등 특정 범위 내의 측정값을 표시할 때 사용되며, min과 max로 측정 가능한 전체 범위를 정의합니다.
3. <progress> 요소
<progress> 요소는 작업 진행률을 나타낼 때 사용되며, max 속성으로 작업의 총량을 지정하면 현재 값이 그 기준에 따라 표시됩니다.
예제 코드
아래 코드를 실행하면 min과 max 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 1부터 20 사이의 숫자만 입력할 수 있도록 제한된 입력 필드를 만드는 예제입니다.
<!DOCTYPE html> <html> <head> <title>HTML min 및 max 속성</title> </head> <body> <form action="" method="get"> 1부터 20 사이의 숫자를 입력하세요 <input type="number" name="num" min="1" max="20"><br> <input type="submit" value="제출"> </form> </body> </html>
실행 결과
사용자가 이 입력 필드에 0이나 21처럼 범위를 벗어난 값을 입력하고 제출 버튼을 누르면, 브라우저가 자동으로 "값은 1보다 크거나 같아야 합니다"와 같은 유효성 검사 메시지를 표시하고 폼 전송을 막아줍니다. 별도의 JavaScript 코드 없이 HTML 속성만으로 간편하게 입력값을 검증할 수 있는 것이 min·max 속성의 가장 큰 장점입니다.