HTML maxlength 속성 – 입력 가능한 최대 문자 수 제한

정의 및 사용 방법

maxlength 속성은
사용자가 <input>의 일부 유형과 <textarea>에 입력할 수 있는 최대 문자 수(Maximum length)를 제한합니다.

해당 요소에 maxlength 속성이 지정되면, 사용자가 허용된 문자 수를 초과하여 입력하는 것을 방지할 수 있습니다.

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

HTML

<label for="nickname">별명</label>

<!-- maxlength="10"으로 최대 10자 입력 제한 -->
<input type="text" id="nickname" maxlength="10" placeholder="최대 10자">

코드 부연설명
placeholder 속성은 텍스트 박스에 값이 없을 때 사용자의 데이터 입력을 돕기 위한 짧은 힌트(단어 또는 짧은 문구)를 나타냅니다.

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

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

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

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

maxlength 속성을 사용하면 사용자가 허용된 문자 수를 초과하여 입력하는 것을 방지할 수 있습니다.
그러나 다음과 같은 경우에는 이 제한이 적용되지 않습니다.

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

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

예를 들어:

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

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