HTML의 <input> 태그는 사용자로부터 데이터를 입력받기 위해 사용됩니다. 입력 필드에 입력할 수 있는 값의 범위를 제한하려면 min 속성과 max 속성을 사용하며, 이 속성들은 각각 입력 필드에 허용되는 최솟값과 최댓값을 지정합니다.
반면, 입력할 수 있는 문자 수 자체를 제한하려면 maxlength 속성을 사용해야 합니다. 참고로 min과 max 속성은 number, range, date, datetime, datetime-local, month, time, week와 같은 숫자 및 날짜·시간 관련 입력 타입에서만 동작합니다.
예제
아래 코드를 실행하면 폼의 텍스트 입력 필드에 허용되는 최대 문자 수를 제한하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML maxlength attribute</title> </head> <body> <form action = "/cgi-bin/hello_get.cgi" method = "get"> Student Name: <br> <input type = "text" name = "first_name" value = "" maxlength = "40" /> <br> Student Subject: <br> <input type = "text" name = "last_name" value = "" maxlength = "30" /> <br> <input type = "submit" value ="Submit" /> </form> </body> </html>
위 예제에서 첫 번째 입력 필드는 maxlength="40"으로 설정되어 최대 40자까지, 두 번째 입력 필드는 maxlength="30"으로 설정되어 최대 30자까지만 입력할 수 있습니다. 사용자가 지정된 글자 수를 초과하여 입력하려고 하면 추가 입력이 차단되므로, 서버로 전송되는 데이터의 길이를 사전에 통제할 수 있다는 장점이 있습니다.