여러 줄로 된 텍스트를 입력받으려면 HTML의 <textarea> 태그를 사용합니다. cols와 rows 속성으로 텍스트 영역의 크기를 조절할 수 있으며, 입력 가능한 글자 수를 제한하려면 maxlength 속성을 사용하면 됩니다. maxlength 속성의 값은 숫자로 지정합니다.
<textarea> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| autofocus | autofocus | 페이지가 로드될 때 텍스트 영역이 자동으로 포커스를 받도록 지정합니다. |
| cols | 숫자 | 화면에 보이는 문자 폭을 기준으로 텍스트 영역의 너비를 지정합니다. |
| disabled | disabled | 텍스트 영역을 비활성화하여 사용자가 값을 입력하거나 수정할 수 없도록 합니다. |
| form | form_id | 해당 텍스트 영역이 속하는 하나 이상의 폼을 지정합니다. |
| maxlength | 숫자 | 텍스트 영역에 입력할 수 있는 최대 문자 수를 지정합니다. |
| name | text | 입력 컨트롤에 이름을 부여합니다. |
| placeholder | text | 텍스트 영역에 입력할 값에 대한 간단한 힌트를 표시합니다. |
| readonly | readonly | 입력 컨트롤을 읽기 전용으로 설정합니다. 사용자가 값을 수정할 수는 없지만 포커스를 받을 수 있으며, 탭(Tab) 키로 폼 컨트롤 사이를 이동할 때도 포함됩니다. |
| required | required | 해당 텍스트 영역이 필수 입력 항목임을 지정합니다. |
| rows | 숫자 | 보이는 텍스트 줄 수를 기준으로 텍스트 영역의 높이를 지정합니다. 지정된 줄 수보다 텍스트가 많으면 스크롤바를 이용해 스크롤할 수 있습니다. |
| wrap | hard / soft | 텍스트 영역 내에서 텍스트의 줄바꿈 방식을 지정합니다. |
maxlength 속성 활용 예제
다음 예제 코드를 실행하면 HTML 폼의 텍스트 영역에 입력되는 문자 수를 제한하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML textarea 태그</title>
</head>
<body>
<form action = "" method = "get">
대학에서 어떤 점이 개선되기를 원하시나요?
<br>
<textarea rows = "5" cols = "40" maxlength = "100" name = "description">
여기에 답변을 입력하세요...
</textarea>
<br>
<input type = "submit" value = "제출" />
</form>
</body>
</html>
위 예제에서는 maxlength = "100"으로 설정했기 때문에 사용자는 텍스트 영역에 최대 100자까지만 입력할 수 있습니다. 필요에 따라 이 값을 조정하면 원하는 글자 수 제한을 손쉽게 적용할 수 있습니다.