HTML에서는 입력 길이를 아주 간단하게 제한할 수 있습니다. 하지만 CSS3만으로는 불가능합니다. CSS에는 입력 필드에 입력할 수 있는 문자 수를 제어하는 기능이 없기 때문입니다. 즉, 입력 길이 제한은 CSS의 역할 범위를 벗어나는 기능적 제약 사항입니다.
CSS가 아닌 HTML로 처리해야 하는 이유
CSS는 웹 페이지의 표현(presentation), 즉 화면에 어떻게 보여질지를 담당하는 언어입니다. 반면 입력 문자 수 제한은 페이지의 동작(behavior)에 해당하기 때문에, HTML의 maxlength 속성을 사용해야 합니다.
HTML maxlength 속성으로 입력 길이 제한하기
<input> 요소에 maxlength 속성을 추가하면, 사용자가 지정된 문자 수를 초과하여 입력할 수 없습니다. 아래 예제는 학생 이름을 최대 20자까지 입력받는 코드입니다.
<!DOCTYPE html> <html> <head> <title>HTML maxlength 속성</title> </head> <body> <form action=""> 학생 이름<br><input type="text" name="name" maxlength="20"><br><br> <input type="submit" value="제출"> </form> </body> </html>
위 코드에서 maxlength="20"은 해당 입력 필드에 최대 20자까지만 입력할 수 있음을 의미합니다. 21번째 문자부터는 더 이상 타이핑되지 않으므로, 별도의 JavaScript 검증 없이도 브라우저 차원에서 입력 길이가 자동으로 제한됩니다.
참고 사항
maxlength 속성은 <textarea> 요소에도 동일하게 적용할 수 있습니다. 다만 클라이언트 측 제한일 뿐이므로, 보안이 중요한 데이터라면 서버 측에서도 입력 길이를 반드시 검증하는 것이 좋습니다.