목차
- <textarea> 예제 - 여러 줄 텍스트 입력
- <textarea> 정의
- <textarea> 구문
- <textarea> 속성
- <textarea> 예제 - 초기값 설정
- <textarea> 예제 - 태그 작동 X (단, 다른 요소 안으로 주입 시 태그 작동 O)
<textarea> 예제 - 여러 줄 텍스트 입력
[내용 표시]
<textarea rows="4" cols="30" readonly>
홈짱닷컴 (homzzang.com)
홈페이지 제작 가이드 카페
</textarea>
[입력 받기]
<form method="post" src="#">
<textarea name="mb_self" rows="5" cols="30"></textarea>
<input type="submit" value="전송">
</form>
<textarea> 정의
여러 줄의 텍스트를 입력 가능한 입력창. (ex) 댓글 입력 창
1.
- 입력창은 제한없이 글자가 화면에 출력되며, 보통 가로길이가 동일한 글씨체 (예: Courier)로 출력됨.
- <pre>태그처럼 입력 내용의 줄 바꿈이 그대로 반영되며, 입력창 내에서는 태그 작동 X. 단, 해당 내용을 JS 이용해 다른 HTML요소 안으로 주입 시 태그 작동 O.
- cols (가로)와 rows (세로)의 글자수로 입력창 크기를 조절 가능하나, CSS의 (width, height) 이용 권장.
- HTML5에서 rows, cols 속성은 필수속성에서 제외되었고, 여러 새로운 속성이 추가됨.
- 시작태그와 종료태그로 구성.
- 시작태그와 종료태그 사이의 내용이 서버로 데이터 전달됨. (value 속성 사용 X)
- 서버로 넘어온 데이터는 name 속성의 값을 이용해 받음.
- 엔터키로 줄바꿈 입력 시, PHP nl2br() 함수로 줄바꿈 출력 가능.
2. cf.
<input> 태그 - 1줄 입력 가능한 입력창
3.
주요 브라우저 모두 지원.
4. MDN <textarea> 예제보기
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
<textarea> 구문
[내용 표시]
<textarea property=value>표시할 내용</textarea>
[입력 받기]
<textarea property=value></textarea>
※ 주의
시작태그와 종료태그가 딱 달라 붙어야 함. 안 그럼 커서가 뒤로 밀림.
들여쓰기 하려면 textarea 요소에 text-indent:5px 또는 padding:5px 적용.
<textarea> 속성
속성
|
속성값 |
쓰임새 |
비고 |
cols
|
number |
입력창의 가로 길이 (= 한 줄에 들어갈 최대 글자 수) |
|
rows
|
number |
입력창의 세로 길이 (= 한번에 화면에 보이는 줄 수) |
|
name
|
text |
다른 <textarea> 태그와의 구별을 위한 고유 이름 텍스트 입력받을 때 필수. |
|
readonly
|
readonly |
오직 읽을 수만 있음. (즉, 입력 창에 입력 불가) |
|
disabled
|
disabled |
<textarea>태그를 사용할 수 없게 함. |
|
autofocus
|
autofocus |
웹 페이지 로딩시, 커서가 입력창에 자동으로 찍히게 함. |
HTML5추가 |
form
|
form_id |
<textarea>가 속하는 하나 또는 그 이상의 폼 태그 id |
HTML5추가 |
maxlength
|
number |
<textarea> 입력 창에 입력 가능한 최대 글자수 |
HTML5추가 |
minlength
|
number |
<textarea> 입력 창에 입력 가능한 최소 글자수 |
HTML5추가 |
placeholder
|
text |
<textarea> 입력 창에 입력 가능한 내용 샘플 제시 |
HTML5추가 |
required
|
required |
<textarea> 입력 창에 반드시 내용을 입력할 것을 요구 |
HTML5추가 |
wrap
|
soft
(기본값)
hard
|
폼에 전송될 때, 입력 내용을 어떻게 포장할건지 정의
soft (기본값)
사용자가 실제로 입력하는 줄 바꿈 외엔
별도의 줄 바꿈 없이 텍스트가 전송.
hard :
입력 창의 길이 제한으로
브라우저에서 추가한 줄 바꿈도 함께 전송.
|
HTML5추가 |
※ <textarea> 태그는 전역속성・이벤트속성 지원.
※ disabled, readonly, required 처럼 속성과 속성값이 같을 땐, 속성만 적어도 무방.
<textarea> 예제 - 초기값 설정
[방법1] - 내용 직접 입력
<textarea name="hz" rows="" cols="" id='' class=''>홈짱닷컴 Homzzang.com</textarea>
결과보기
[방법2] - JS로 내용삽입
<textarea name="hz" rows="" cols="" id='' class=''></textarea>
<script>
document.querySelector('textarea[name="hz"]').textContent = "홈짱닷컴 Homzzang.com";
</script>
결과보기
<textarea> 예제 - 태그 작동 X (단, 다른 요소 안으로 주입 시 태그 작동 O)
(예) <textarea> 태그 안에서는 '<b>' 태그가 작동 않지만, <div> 태그 안으로 주입 시 태그 작동 함.
<!-- 태그 작동 X-->
<textarea id="hz" rows="4" cols="50"><b>Homzzang.com</b></textarea>
<button onclick="injectContent()">클릭</button>
<!--태그 작동 O-->
<div id="demo"></div>
<script>
function injectContent() {
var havalue = document.getElementById('hz').value;
var demo = document.getElementById('demo');
demo.innerHTML = havalue;
}
</script>
결과보기