HTML에서 여러 줄로 된 텍스트 입력란을 만들려면 <textarea> 태그를 사용합니다. rows(행)와 cols(열) 속성을 이용하면 텍스트 영역의 크기를 조절할 수 있으며, 주로 폼(form) 안에서 사용자가 긴 내용을 여러 줄에 걸쳐 입력할 수 있도록 할 때 활용됩니다.
<textarea> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| autofocus | autofocus | 페이지가 로드될 때 텍스트 영역이 자동으로 포커스를 받도록 지정합니다. |
| cols | 숫자 | 화면에 보이는 문자 수를 기준으로 텍스트 영역의 너비를 지정합니다. |
| disabled | disabled | 텍스트 영역을 비활성화하여 사용자가 값을 입력하거나 수정하지 못하도록 합니다. |
| form | form_id | 텍스트 영역이 속할 하나 이상의 폼을 지정합니다. |
| maxlength | 숫자 | 텍스트 영역에 입력할 수 있는 최대 문자 수를 지정합니다. |
| name | text | 입력 컨트롤에 이름을 부여합니다. 서버로 데이터를 전송할 때 이 이름이 사용됩니다. |
| placeholder | text | 텍스트 영역에 입력해야 할 값에 대한 간단한 힌트를 표시합니다. |
| readonly | readonly | 입력 컨트롤을 읽기 전용으로 설정합니다. 사용자는 값을 수정할 수 없지만, 컨트롤은 포커스를 받을 수 있으며 Tab 키로 폼 컨트롤을 이동할 때에도 포함됩니다. |
| required | required | 해당 텍스트 영역이 필수 입력 항목임을 지정합니다. |
| rows | 숫자 | 화면에 보이는 텍스트 줄 수를 기준으로 텍스트 영역의 높이를 지정합니다. 지정된 줄 수보다 많은 텍스트가 입력되면 스크롤바를 이용해 나머지 내용을 확인할 수 있습니다. |
| wrap | hard soft | 텍스트 영역 안에서 텍스트가 줄바꿈되는 방식을 지정합니다. |
예제
다음 코드를 실행하면 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 = "60" name = "description"> 여기에 상세 내용을 입력하세요... </textarea><br> <input type = "submit" value = "submit" /> </form> </body> </html>
위 예제에서 rows="5"는 텍스트 영역의 높이를 5줄로, cols="60"은 너비를 60자로 지정한 것입니다. 이처럼 두 속성만 조절하더라도 입력란의 크기를 손쉽게 원하는 형태로 만들 수 있습니다.