HTML에서 여러 줄로 구성된 텍스트 입력 필드를 추가하려면 <textarea> 태그를 사용합니다. cols(열)와 rows(행) 속성을 조합하면 텍스트 영역의 크기를 자유롭게 지정할 수 있으며, 주로 폼(form) 안에서 사용자가 여러 줄에 걸쳐 긴 텍스트를 입력할 수 있도록 할 때 활용됩니다.
textarea 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| autofocus | autofocus | 페이지가 로드될 때 텍스트 영역이 자동으로 포커스를 받도록 지정합니다. |
| cols | 숫자 | 화면에 보이는 문자 폭을 기준으로 텍스트 영역의 너비를 지정합니다. |
| disabled | disabled | 텍스트 영역을 비활성화합니다. 사용자가 값을 입력하거나 수정할 수 없습니다. |
| form | form_id | 해당 텍스트 영역이 속하는 하나 이상의 폼을 지정합니다. |
| maxlength | 숫자 | 텍스트 영역에 입력할 수 있는 최대 문자 수를 제한합니다. |
| name | 텍스트 | 입력 컨트롤에 이름을 부여합니다. 서버 전송 시 데이터를 구분하는 역할을 합니다. |
| placeholder | 텍스트 | 입력해야 할 값에 대한 간단한 힌트를 텍스트 영역 안에 미리 표시합니다. |
| readonly | readonly | 입력 컨트롤을 읽기 전용으로 설정합니다. 사용자가 값을 변경할 수는 없지만, 포커스를 받을 수 있으며 Tab 키로 폼 컨트롤을 이동할 때에도 포함됩니다. |
| required | required | 해당 텍스트 영역이 필수 입력 항목임을 지정합니다. 값이 비어 있으면 폼 제출이 차단됩니다. |
| rows | 숫자 | 화면에 보이는 텍스트 줄 수를 기준으로 텍스트 영역의 높이를 지정합니다. 텍스트가 이보다 많아지면 스크롤바를 통해 스크롤할 수 있습니다. |
| wrap | hard / soft | 텍스트 영역 안에서 줄바꿈이 처리되는 방식을 지정합니다. |
예제
다음 코드를 직접 실행하면서 HTML에서 textarea 태그를 사용하는 방법을 확인해 보세요.
<!DOCTYPE html> <html> <head> <title>HTML textarea Tag</title> </head> <body> <form action = "/cgi-bin/hello_get.cgi" method = "get"> What improvements you want in college? <br> <textarea rows = "4" cols = "40" name = "description"> Enter details here... </textarea> <br> <input type = "submit" value = "submit" /> </form> </body> </html>
위 예제에서는 rows="4", cols="40"으로 텍스트 영역의 높이와 너비를 지정했으며, name="description"을 통해 폼 제출 시 서버로 전달되는 데이터의 이름을 정의했습니다. 이처럼 textarea 태그는 게시판 글쓰기, 문의 양식, 리뷰 작성 등 긴 텍스트를 입력받아야 하는 모든 상황에서 유용하게 사용됩니다.