정의 및 사용 방법

minlength 속성은
사용자가 <input>의 일부 유형과 <textarea>에 입력해야 하는 최소 문자 수(Minimum length)를 지정합니다.

해당 요소에 minlength 속성이 지정되면, 사용자는 지정된 최소 문자 수 이상을 입력해야 합니다.

참고하세요!
minlength 속성은 최소로 입력해야 하는 값만을 체크합니다. 만약, 사용자가 해당 요소에 아무것도 입력하지 않으면 빈 값은 허용됩니다. 빈 값도 허용하지 않으려면 required 속성을 함께 사용하세요. 기본 예제 참조

부연설명
required 속성은 해당 입력 필드를 필수로 조건에 맞게 입력해야만 양식이 제출되게 합니다.

특징

  • 속성 값은 음이 아닌 0 이상의 정수 값을 가져야 합니다.
  • 잘못된 값이 지정되면, 입력해야 하는 최소 문자 수 지정이 적용되지 않습니다.
  • 최소 문자 수는 표준 문자 단위(바이트가 아닌 문자의 개수)로 계산되므로, 영문, 숫자, 한글 등 언어에 관계없이 동일하게 적용됩니다.

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

HTML 
<form>
    <label for="nickname">별명</label>
    
    <!-- minlength="2"으로 최소 2자 입력 요구 -->
    <input type="text" id="nickname" minlength="2" placeholder="최소 2자 이상 입력..." required>
    <button type="submit">제출</button>
</form>
실제 적용된 모습 실습 가이드: minlength 작동 확인
  • 오류 확인: 입력 필드에 입력이 없거나 1글자만 입력한 후, [제출] 버튼을 클릭해 보세요. 브라우저가 최소 입력 조건(2글자) 미달 오류 메시지를 표시하는 것을 확인합니다.
  • 성공 확인: 필드에 2글자 이상 입력한 후, 다시 [제출] 버튼을 클릭하면 오류 없이 폼이 제출되는 것을 확인합니다.

minlength 속성이 사용 가능한 요소

minlength 속성은 모든 요소에 적용할 수 있는 글로벌 속성이 아닙니다.
텍스트 기반의 관련 컨트롤 요소(<input>의 일부 유형과 <textarea>)에만 사용 가능합니다.

minlength 속성은 사용자가 입력해야 하는 최소 문자 수를 지정하는 목적으로, 다음 유형의 <input> 요소에는 적용되지 않으며 무시됩니다.

💡 팁!
<input type="number">에 입력할수 있는 숫자의 최솟값을 지정하려면 min 속성을 사용하세요. min 속성은 필드에 입력할수 있는 숫자의 최솟값을 지정합니다.

알아두세요!
요소의 콘텐츠를 편집할 수 있는지 여부를 지정하는 contenteditable 속성이 적용된 요소도 텍스트 입력이 가능합니다. 하지만, 이러한 요소는 컨트롤 요소가 아니므로 minlength 속성을 적용할 수 없습니다.

minlength 속성의 한계

minlength 속성을 사용하면 사용자는 지정된 최소 문자 수 이상을 입력해야 합니다.
그러나 다음과 같은 경우에는 이 제한이 적용되지 않습니다.

  • 사용자 브라우저의 개발자 도구 등을 사용하여 minlength 속성 자체를 삭제하거나 값을 변경할 수 있습니다.
  • 전송 단계에서 JavaScript 등을 사용하여 입력 값을 임의로 변조할 수 있습니다.
  • required 속성을 함께 지정하지 않으면 빈 값은 허용됩니다.

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

접근성 고려 사항

minlength 속성의 사용 유무만으로는 기능적인 접근성에 문제가 없습니다.
하지만 사용자가 입력해야 하는 최소 문자 수가 명확하게 안내되지 않는다면, 입력 후 제출 상황에서 오류 안내 메시지 등으로 사용자는 놀라거나 당황할 수 있습니다.

  • 최소 입력 요구 문자 수를 라벨이나 플레이스홀더를 통해 명확하게 전달합니다.
  • 실시간 입력 글자 수를 함께 표시하는 UI(10/20 등)를 제공하면 사용자 경험이 더욱 개선됩니다.

예를 들어:

HTML 
<label for="nickname">별명 (최소 2자 이상)</label>
<input type="text" id="nickname" minlength="2" placeholder="예: skycat">
실제 적용된 모습

브라우저 호환성

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

명세서

minlength 속성의 명세서 사양
명세서 사양
minlength HTML
#attr-fe-minlength
<input> minlength HTML
#attr-input-minlength
<textarea> minlength HTML
#attr-textarea-minlength

참고문헌

같이 보기