HTML에서 입력 필드에 허용되는 최대 문자 수를 제한하려면 maxlength 속성을 사용합니다. 이 속성은 텍스트 입력란(<input type="text">)이나 <textarea>에 적용할 수 있으며, 사용자가 지정된 문자 수를 초과하여 입력하지 못하도록 자동으로 차단해 줍니다.
maxlength 속성 예제
다음 코드는 maxlength 속성을 실제로 구현한 예제입니다. 'Cricketer(크리켓 선수)' 입력란에는 최대 20자까지만 입력할 수 있으며, 숫자 입력란인 'Rank(순위)'는 min과 max 속성으로 1~10 사이의 값만 받도록 설정했습니다.
<!DOCTYPE html> <html> <body> <form action = ""> 순위(Rank): <input type = "number" name = "rank" min = "1" max = "10"><br> 선수 이름(Cricketer): <input type = "text" name = "cricketer" maxlength = "20"><br> <input type = "submit" value = "Submit"> </form> </body> </html>
핵심 포인트 정리
- maxlength: 텍스트 계열 입력 요소에서 최대 입력 가능한 문자 수를 제한합니다.
- min / max: 숫자 타입(
type="number") 입력란에서 허용되는 값의 범위를 지정합니다. 문자 수가 아닌 값 자체를 제한한다는 점에서 maxlength와 다릅니다. - 보안 유의사항: maxlength는 브라우저 차원의 편의 기능일 뿐이므로, 악의적인 요청까지 차단하려면 서버 측에서도 반드시 입력 길이를 검증해야 합니다.
이처럼 maxlength 속성을 활용하면 별도의 JavaScript 코드 없이도 간단하게 입력 길이를 제어할 수 있어, 폼 유효성 관리와 사용자 경험 개선에 매우 유용합니다.