Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML min 속성 완벽 정리 – 입력값 최소 범위 설정 방법

HTML의 <input> 요소에서 사용하는 min 속성은 입력 필드에 허용되는 최솟값을 지정하는 기능입니다. HTML5부터 도입되었으며, 주로 min과 max 속성을 함께 사용해 입력 가능한 값의 범위를 설정합니다.

min 속성이 적용되는 input 타입

min 속성은 다음과 같은 input 타입에서 사용할 수 있습니다.

  • number – 숫자 입력
  • date – 날짜 선택
  • datetime-local – 날짜 및 시간 선택
  • range – 범위 슬라이더
  • time, month, week 등 날짜·시간 관련 타입

이 속성을 적용하면 사용자가 지정된 최솟값보다 작은 값을 입력할 경우, 폼 제출 시 브라우저가 자동으로 유효성 검사를 수행해 오류 메시지를 표시합니다.

예제 코드

아래 예제는 로그인 폼에 min 속성을 적용한 예입니다. ID 입력 필드에 min="1"을 설정했기 때문에 사용자는 1보다 작은 값을 입력할 수 없습니다.

<!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>

코드 설명

위 예제에서는 여러 입력 필드와 제출 버튼으로 구성된 폼을 만들었습니다.

<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"로 지정되어 있으며, min 값이 1로 설정되어 있어 사용자가 1 미만의 값을 입력하면 폼이 제출되지 않습니다.

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

정리

min 속성은 별도의 JavaScript 없이도 브라우저 차원에서 입력값 유효성을 검증할 수 있는 편리한 HTML5 기능입니다. max 속성과 함께 사용하면 허용 범위를 명확히 제한할 수 있어, 숫자나 날짜 입력이 필요한 폼에서 데이터 품질을 높이는 데 매우 유용합니다.