HTML에서 입력 필드에 허용되는 최소값을 지정하려면 min 속성을 사용합니다. 이 속성은 주로 숫자나 날짜 입력 필드에서 사용자가 입력할 수 있는 값의 하한선을 정의하는 데 활용됩니다.
min 속성이란?
min 속성은 <input> 요소에서 허용되는 최솟값을 설정합니다. type="number", type="date", type="range" 등 다양한 입력 유형과 함께 사용할 수 있으며, 폼 제출 시 브라우저가 자동으로 유효성 검사를 수행하여 최소값 미만의 입력을 차단합니다.
예제 코드
다음 코드를 실행하여 min 속성의 실제 동작을 확인해 보세요.
<!DOCTYPE html> <html> <body> <form action=""> Rank: <input type = "number" name = "rank" min = "1" max = "10"><br> <input type = "submit"> </form> </body> </html>
코드 설명
위 예제에서 순위(Rank) 입력 필드는 min="1"과 max="10"이 함께 지정되어 있어, 사용자는 1부터 10 사이의 값만 입력할 수 있습니다. 만약 1보다 작은 값을 입력하고 제출 버튼을 누르면, 브라우저가 자동으로 "값은 1 이상이어야 합니다"와 같은 오류 메시지를 표시하며 폼 제출을 막습니다.
이처럼 min 속성을 활용하면 별도의 JavaScript 코드 없이도 HTML만으로 기본적인 입력값 검증이 가능하므로, 사용자 경험을 개선하고 잘못된 데이터 전송을 사전에 방지할 수 있습니다.