정의 및 사용 방법

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

참고문헌

같이 보기