HTML 텍스트 영역(textarea)이란?
HTML에서 텍스트 영역을 표시하려면 <textarea> 태그를 사용합니다. <textarea> 태그는 폼(form) 내부에서 여러 줄 텍스트 입력 요소를 선언하는 데 사용되며, 사용자가 여러 줄에 걸쳐 자유롭게 텍스트를 입력할 수 있는 컨트롤을 제공합니다.
주소, 상품 리뷰, 상세 설명처럼 한 줄 입력 필드(<input type="text">)로는 부족한 긴 텍스트를 받아야 할 때 특히 유용합니다.
<textarea> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| autofocus | autofocus | 페이지가 로드될 때 해당 텍스트 영역이 자동으로 포커스를 받도록 지정합니다. |
| cols | 숫자 | 화면에 보이는 문자 수를 기준으로 텍스트 영역의 너비를 지정합니다. |
| disabled | disabled | 입력 컨트롤을 비활성화합니다. 사용자가 값을 변경할 수 없으며, 포커스도 받을 수 없습니다. |
| form | form_id | 해당 텍스트 영역이 속한 하나 이상의 폼을 지정합니다. |
| maxlength | 숫자 | 텍스트 영역에 입력할 수 있는 최대 문자 수를 지정합니다. |
| name | 텍스트 | 입력 컨트롤에 이름을 부여합니다. 폼 데이터를 서버로 전송할 때 이 이름이 함께 전달됩니다. |
| placeholder | 텍스트 | 입력 전에 값에 대한 짧은 힌트(안내 문구)를 표시합니다. |
| readonly | readonly | 입력 컨트롤을 읽기 전용으로 설정합니다. 사용자는 값을 변경할 수 없지만, 컨트롤은 포커스를 받을 수 있고 Tab 키로 폼 컨트롤을 이동할 때에도 포함됩니다. |
| required | required | 해당 텍스트 영역이 필수 입력 항목임을 지정합니다. |
| rows | 숫자 | 화면에 보이는 텍스트 줄 수를 기준으로 텍스트 영역의 높이를 지정합니다. 텍스트가 이보다 많아지면 사용자는 스크롤바를 이용해 스크롤할 수 있습니다. |
| wrap | hard soft | 텍스트 영역에서 줄바꿈(wrap) 처리 방식을 지정합니다. |
예제
다음 코드를 실행하면 HTML 페이지에서 텍스트 영역이 어떻게 표시되는지 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML textarea 태그</title> </head> <body> <form action="/cgi-bin/hello_get.cgi" method="get"> 과목 입력 <br /> <textarea rows="5" cols="50" name="description"> </textarea> <input type="submit" value="제출" /> </form> </body> </html>
활용 팁
rows와 cols 속성으로 기본 크기를 지정할 수 있지만, 더 세밀한 조절이 필요하다면 CSS의 width, height 속성을 사용하는 것이 좋습니다. 또한 CSS의 resize 속성을 활용하면 사용자가 텍스트 영역의 크기를 드래그로 조절할 수 있는지 여부도 제어할 수 있습니다.