정의 및 사용 방법

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

사용 가능한 요소

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

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

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

예제

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

<input>

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

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

<input type="date">

선택할 수 있는 최대 날짜를 설정합니다.
즉, 사용자가 선택할 수 있는 가장 마지막 날짜를 지정합니다.

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

HTML 
<input type="date" value="2024-10-17" max="2024-10-24">
브라우저에서 실제 표시된 모습

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

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

<input type="time">

선택할 수 있는 허용 가능한 최대 시간을 설정합니다.
이 값은 사용자가 선택할 수 있는 가장 마지막 시간을 지정합니다.

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

HTML 
<input type="time" value="09:45" max="10:00" >
브라우저에서 실제 표시된 모습
주의할 점

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

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

<input type="datetime-local">

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

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

HTML 
<!-- value: 2013년 05월 13일 09시 12분(2013-05-13T09:12) -->
<!-- max: 2013년 05월 13일 10시 00분(2013-05-13T10:00) -->
<input
    type="datetime-local"
    value="2013-05-13T09:12"
    max="2013-05-13T10:00">
브라우저에서 실제 표시된 모습
주의할 점

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

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

<input type="number">

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

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

알아두세요!
이 최댓값 지정은 마우스로 숫자를 늘리거나 줄일 수 있는 화살표(혹은 스피너, spinner)를 사용할 경우에 브라우저가 유효성 검사를 실시해서 최댓값보다 큰 수로 늘릴 경우 거부하는 기능입니다. 그런데, 사용자가 최댓값보다 큰 수를 직접 입력할 경우에는 유효성 검사를 실시해서 거부하는 기능을 구현하지 못하고 실패합니다.

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

<input type="range">

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

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

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

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

<meter>

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

HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0"
    max="1"
    value="0.5">50%</meter>
실제 적용된 모습

<progress>

<progress>에서 max 속성은 진행 상태가 완료되는 최댓값을 지정합니다. 만약 유효하지 않거나 지정되지 않은 경우 최댓값은 1입니다.

HTML 
<label for="setup">설치 진행률</label>
<progress id="setup" max="100" value="75">75%</progress>
실제 적용된 모습

<input>에서 max 속성의 한계

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

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

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

접근성 고려 사항

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

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

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

HTML 
<label for="num">구매 개수(최대 10개까지만)</label>
<input type="number" id="num" value="1" max="10">
실제 적용된 모습

브라우저 호환성

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

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

명세서

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

참고문헌

같이 보기