<textarea>
<textarea> 태그는 여러줄의 텍스트를 편집할 수 있습니다. 코멘트 또는 피드백 양식으로 크기와 여러가지 속성을 설정할 수 있습니다. 접근성을 위해 <label> 요소를 같이 사용하며, 서버에 전송하기 위해 name 속성도 같이 사용합니다. row와 col 속성을 사용하면 텍스트 영역을 지원할 수 있으며, 브라우저마다 기본 값이 다를 수 있습니다. maxlength 속성을 이용하면 최대 문자수와 최소 문자수를 지정할 수 있으며, 필수 요소인 경우 필수요소로 설정할 수 있습니다. wrap 속성은 글의 줄바꿈을 설정할 수 있으며, placeholder를 이용하면 텍스트 영역의 미리보기 힌트 글자를 설정 할 수 있습니다.
<textarea>
<textarea> 태그는 여러줄의 텍스트를 편집할 수 있는 컨트롤을 정의합니다.
| 특징 | 설명 |
|---|---|
| 요소 | 인라인 요소(Inline Element) |
| 닫는 태그 | 닫는 태그 사용(<textarea> ~ </textarea>) |
| 버전 | HTML4 |
| 시각적 표현 | 텍스를 쓸 수 있는 영역 |
정의(Definition)
- <textarea> 태그는 여러줄의 텍스트를 편집할 수 있는 컨트롤을 정의합니다.
- <textarea> 태그는 글자의 수를 무제한으로 할 수 있으며, 폰트는 Courier로 설정됩니다.
- <textarea> 태그는 "cols" 속성과 "rows" 속성으로 크기를 설정합니다.
속성(Property)
| 속성 | 값(예) | 설명 | 버전 |
|---|---|---|---|
| autofocus | autofocus | 페이지가 로드한 후 자동으로 포커스를 설정합니다. |  |
| cols | cols = "30" | 텍스트 영역의 가로 폭을 설정합니다. | - |
| dirname | dirname = "name.dir" | 텍스트 영역의 텍스트 방향을 제출합니다. | |
| disabled | disabled | 텍스트 영역을 비활성화합니다. | - |
| form | form = "id" | 텍스트 영역에 속한 폼 아이디를 설정합니다. | |
| maxlength | maxlength = "100" | 텍스트 영역의 최대 문자수를 설정합니다. | |
| name | name = "text" | 텍스트 영역의 이름을 설정합니다. | - |
| placeholder | placeholder = "text" | 텍스트 영역의 미리보기 힌트 글자를 설정합니다. | |
| readonly | readonly | 텍스트 영역을 읽기 전용으로 설정합니다. | - |
| required | required | 텍스트 영역이 필수조건일 때 설정합니다. | |
| rows | rows = "30" | 텍스트 영역의 세로 폭을 설정합니다. | - |
| spellcheck | true default false |
스펠링을 체크합니다. 부모요소의 값을 따릅니다. 스펠링을 검사하지 않습니다. |
- |
| wrap |
soft hard |
텍스트 영영의 줄바꿈(기본값)을 설정합니다. 텍스트 영영의 자동 줄바꿈을 설정합니다. |
|
Sample1
<textarea> 태그의 기본 사용법입니다.
Sample1
html
<textarea name="textarea" id="textarea" cols="50" rows="5">
여기에 글을 작성합니다.
</textarea>
Sample2
<textarea> 태그에 글자수 제한 예제입니다.
Sample1
html
<textarea name="textarea" id="textarea" cols="50" rows="5" minlength="10" maxlength="20">
글자를 최소 10자에서 최대 20자로 제한을 걸었습니다.
</textarea>
Sample3
<textarea> 태그에 미리보기 글씨를 설정하였습니다.
Sample1
html
<textarea name="textarea" id="textarea" cols="50" rows="5" placeholder="미리보기 글씨를 설정했습니다.">
</textarea>
Sample4
<textarea> 태그에 사용하지 못하도록 설정하였습니다.
Sample1
html
<textarea name="textarea" id="textarea" cols="50" rows="5" disabled>
사용하지 못하도록 설정하였습니다.
</textarea>
Sample5
<textarea> 태그를 읽기 전용으로 설정하였습니다.
Sample1
html
<textarea name="textarea" id="textarea" cols="50" rows="5" readonly>
읽기 전용으로 설정하였습니다.
</textarea>
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <textarea> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| autofocus | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| cols | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| dirname | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| disabled | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| form | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| maxlength | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| name | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| placeholder | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| readonly | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| required | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| rows | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| spellcheck | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| wrap | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
