정의 및 사용 방법

min 속성은 해당 요소의 최솟값을 지정합니다.
사용 가능한 요소는 정해져 있으며 그 값의 의미는 요소마다 다릅니다.

사용 가능한 요소

min 속성은 모든 요소에 공통으로 적용할 수 있는 글로벌 속성이 아닙니다.
사용 가능한 요소가 정해져 있고 그 값의 의미는 요소마다 다르며, 특정 유형에서만 지정할 수 있습니다.

min 속성의 사용 가능한 요소와 그 최솟값의 의미
요소최솟값의 의미
<input> 해당 컨트롤 요소가 가질 수 있는 최솟값입니다.
이 요소의 type 속성으로 나타내는 유형중에서 특정 유형에만 지정할 수 있습니다.
<meter> 해당 컨트롤 UI에 표시되는 최솟값입니다.

알아두세요!
해당 요소에 유효한 max 속성이 설정되어 있다면, min 속성 값은 반드시 그 값보다 작거나 같아야 합니다.

예제

다음은 min 속성이 사용 가능한 요소별로, 그 최솟값이 의미하는 바를 살펴보겠습니다.

<input>

<input>에서 min 속성은 해당 컨트롤 요소가 가질 수 있는 최솟값입니다. 일부 유형에서 사용가능합니다.

사용자가 값을 단계별로 입력하거나 선택할 수 있는 다음의 유형들에서만 적용됩니다.

<input type="date">

선택할 수 있는 허용 가능한 최소 날짜를 설정합니다.
즉, 사용자가 선택할 수 있는 가장 첫 번째 날짜를 지정합니다.

날짜는 YYYY-MM-DD 형식으로 입력해야 합니다.

HTML 
<input type="date" value="2024-10-17" min="2024-10-08">
실제 적용된 모습

브라우저에서 제공하는 기본 UI에서는, min로 지정된 날짜 이전의 날짜를 사용자가 선택할 수 없도록 자동으로 제한합니다.

브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 날짜가 지정된 최소 날짜 이전인지 아닌지 유효성 검사를 시행합니다.

<input type="time">

선택할 수 있는 허용 가능한 최소 시간을 설정합니다.
즉, 이 값은 사용자가 선택할 수 있는 가장 첫 번째 시간을 지정합니다.

시간은 분 단위까지만 설정하려면 HH:mm 형식으로 입력하고, 초 단위까지 설정하려면 HH:mm:ss 형식으로 입력합니다.

HTML 
<input type="time" value="09:45" min="09:30" >
실제 적용된 모습
주의할 점

브라우저에서 제공하는 기본 UI에서는, min로 지정된 시간 이전의 시간을 사용자가 선택할 수 없도록 자동으로 제한하는 기능을 지원하지 않는 경우가 있습니다.

하지만 브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 시간이 지정된 최대 시간 이전인지 아닌지 유효성 검사를 시행합니다.

<input type="datetime-local">

선택할 수 있는 허용 가능한 최소 날짜와 시간을 설정합니다.
이 값은 사용자가 선택할 수 있는 가장 처음 날짜와 시간을 지정합니다.

날짜와 시간은 YYYY-MM-DDThh:mm 형식으로 입력해야 합니다. 초 단위까지 설정하려면 YYYY-MM-DDThh:mm:ss 형식으로 입력합니다.

HTML 
<!-- value: 2013년 05월 13일 09시 12분(2013-05-13T09:12) -->
<!-- min: 2013년 05월 13일 08시 00분(2013-05-13T08:00) -->
<input
    type="datetime-local"
    value="2013-05-13T09:12"
    min="2013-05-13T08:00">
실제 적용된 모습
주의할 점

브라우저에서 제공하는 기본 UI에서는, min으로 지정된 날짜 이전의 날짜는 사용자가 선택할 수 없도록 자동으로 제한합니다. 하지만, 같은 날짜 내에서 min으로 지정된 시간 이전의 시간을 사용자가 선택할 수 없도록 자동으로 제한하는 기능은 지원하지 않는 경우가 있습니다.

브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 날짜와 시간이 지정된 최소 날짜와 시간 이전인지 아닌지 유효성 검사를 시행합니다.

<input type="number">

선택할 수 있는 허용 가능한 최소 숫자를 설정합니다.
즉, 이 값은 사용자가 선택할 수 있는 가장 작은 숫자를 지정합니다.

HTML 
<input type="number" value="7" min="0">
브라우저에서 실제 표시된 모습

알아두세요!
이 최솟값 지정은 마우스로 숫자를 늘리거나 줄일 수 있는 화살표(혹은 스피너, spinner)를 사용할 경우에 브라우저가 유효성 검사를 실시해서 최솟값보다 작은 수로 줄이는 것을 방지합니다. 그러나 사용자가 최솟값보다 작은 수를 직접 입력하는 경우에는 입력 자체가 제한되지 않습니다.

하지만 브라우저는 폼 제출 시, 해당 요소에 입력된 숫자가 지정된 최소 숫자보다 작은지 아닌지 유효성 검사를 시행합니다.

<input type="range">

min 속성은 속성은 허용된 범위에서 선택할 수 있는 숫자의 가장 작은 값을 지정합니다.
기본값은 0입니다. 유효한 숫자가 아닌 값이 지정된 경우에는 min 속성의 값이 지정되지 않습니다.

HTML 
<label for="volume">볼륨</label>
<input type="range" id="volume" min="50">
실제 적용된 모습
음수값 사용

min 속성에는 음수값을 사용할 수 있습니다.

HTML 
<label for="volume">볼륨</label>
<input type="range" id="volume" min="-100">
실제 적용된 모습

<meter>

<meter>에서 min 속성은 측정 범위의 하한 숫자 경계에 해당하는 최솟값입니다. 만약 유효하지 않거나 지정되지 않은 경우 최솟값은 0입니다.

HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0.5"
    value="0.6">60%</meter>
<!-- max 속성을 지정하지 않으면 max="1"입니다. -->
실제 적용된 모습

<input>에서 min 속성의 한계

<input>에서 min 속성을 사용하면 사용자가 허용된 최솟값을 벗어나 입력하거나 선택하는 것을 방지할 수 있습니다.
그러나 다음과 같은 경우에는 이 제한이 적용되지 않습니다.

  • 사용자 브라우저의 개발자 도구 등을 사용하여 min 속성 자체를 삭제하거나 값을 변경할 수 있습니다.
  • 폼 전송 단계에서 JavaScript 등을 사용하여 입력 값을 임의로 변조할 수 있습니다.

따라서 min 속성만으로는 해당 요소에 입력되는 최솟값을 완전히 보장할 수 없으므로, 서버 측에서 반드시 추가적인 유효성 검사를 수행해야 합니다.

<input>의 step 속성에 미치는 영향

<input>의 step속성은 해당 요소의 입력 가능한 값의 간격(step)을 지정합니다. 브라우저는 **간격 기준(Step Base)**이라는 내부 알고리즘을 기준으로 step 속성으로 지정된 간격을 조정합니다.

**간격 기준(Step Base)**은 다음과 같습니다.

  1. min 속성이 있는 경우
    min 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다.
  2. value 속성이 있는 경우
    value 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다. 단, 유효한 min이 설정되어 있다면 min 속성의 값을 기준으로 간격이 조정됩니다.
  3. min, value 속성이 둘 다 없을 경우
    <input> 유형에서 기본 간격 기준(Step Base)이 정의되어 있으면 그 값을 기준으로 사용합니다.
    기본 간격 기준이 정의되지 않으면, 기준 없이 해당 <input> 유형 상태(State)에 맞춰 간격이 조정됩니다.

이러한 간격 기준에 따라, 사용자는 해당 컨트롤이 제공하는 인터페이스를 통해 지정된 간격(step)으로 값을 입력하거나 선택할 수 있으며, 브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 값이 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

다음은 min 속성이 존재하는 <input type="number">에서 step 속성 값의 간격이 min 속성의 값을 기준으로 맞춰 조정되는 예제입니다.

HTML 
<input type="number" value="2" step="3" min="1">
실제 적용된 모습 해당 요소에 마우스 커서를 올려 이 컨트롤이 제공하는 인터페이스인 화살표(스피너)를 사용해 숫자를 올리거나 내려보세요.

해당 요소의 초깃값은 2입니다. step="3"은 마우스로 숫자를 늘리거나 줄일 수 있는 화살표(혹은 스피너, spinner)를 사용할 경우 값을 숫자 3씩 증가하거나 감소하게 합니다. 이때, 초깃값인 2에서 증가할 때 그 다음은 5, 8이 아닌 4, 7로 증가하게 됩니다. 이것은 min="1"이 지정되어 있어서 1을 기준으로 맞춰 숫자 3씩 증가하거나 감소하도록 조정되었기 때문입니다.

접근성 고려 사항

min 속성의 사용 유무만으로는 기능적인 접근성에 문제가 없습니다.
하지만 사용자가 입력하거나 선택할 수 있는 최솟값이 명확하게 안내되지 않는다면, 입력이 제한되는 상황에서 사용자는 당황하거나 오류로 오해할 수 있습니다.

  • 최솟값을 알 수 있도록 라벨이나 플레이스홀더를 통해 명확하게 전달합니다.
  • 실시간으로 최솟값이 초과되었다는걸 시각적으로 표시하면 사용자는 더 쉽게 파악할 수 있습니다.

예를 들어 다음은 라벨을 통해 명확하게 최솟값을 안내합니다.

HTML 
<label for="num">구매 개수(최소 2개 이상 구매가능)</label>
<input type="number" id="num" value="2" min="2">
실제 적용된 모습

브라우저 호환성

min 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
min 예 예 예 예

WebView Android에서 <meter> 태그의 min 속성 지원이 안될 수 있습니다. MDN의 html.elements.meter.min 브라우저 호환성 표를 참고하세요.

명세서

min 속성의 명세서 사양
명세서 사양
<input> min HTML
#attr-input-min
<meter> min HTML
#attr-meter-min

참고문헌

같이 보기