HTML maxlength 속성이란?
HTML의 maxlength 속성은 문서 내 <input> 요소에 입력할 수 있는 최대 문자 수를 지정하는 속성입니다. 사용자가 지정된 글자 수를 초과하려고 하면 그 이상 입력되지 않기 때문에, 전화번호·우편번호·아이디처럼 글자 수가 정해진 데이터를 받을 때 매우 유용합니다.
문법(Syntax)
maxlength 속성의 기본 문법은 다음과 같습니다.
<input maxlength="숫자">
속성값에는 양의 정수를 넣으며, 해당 숫자만큼의 문자만 입력할 수 있습니다.
예제 코드
다음 예제는 이름 입력란에 최대 8자까지만 입력되도록 maxlength 속성을 적용한 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
input {
width: 300px;
background: transparent;
border: 2px solid #fff;
outline: none;
display: block;
margin: 1rem auto;
border-radius: 20px;
padding: 8px 10px;
}
::placeholder {
color: #000;
}
.btn {
background: #db133a;
color: #fff;
border: none;
width: 320px;
}
</style>
<body>
<h1>HTML maxlength Attribute Demo</h1>
<form action="">
<input type="text" placeholder='Enter your first name(only 8 characters)' maxlength="8">
<input type="submit" value="SUBMIT" class="btn">
</form>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같이 입력 필드가 화면에 나타납니다.
이제 입력 필드에 8자를 초과하는 문자를 입력해 보세요. maxlength 속성이 동작하여 8번째 문자 이후로는 더 이상 입력되지 않는 것을 확인할 수 있습니다.
maxlength 속성 사용 시 알아두면 좋은 점
- maxlength는 <input> 요소뿐 아니라 <textarea> 요소에서도 사용할 수 있습니다.
- 속성값을 0으로 지정하면 어떤 문자도 입력할 수 없습니다.
- 한글, 영어, 숫자, 공백 등 모든 문자가 각각 한 글자로 계산됩니다.
- maxlength는 브라우저(클라이언트) 측에서만 작동하므로, 보안을 위해서는 서버 측에서도 반드시 입력 길이를 검증해야 합니다.