[form] HTML - <textarea> 태그 ★ - 여러줄 입력창 (= 텍스트입력영역 = 텍스트영역 = textarea태그 = 텍스트에어리어태그) (HTML5수정)

목차

1. <textarea> 예제 - 여러 줄 텍스트 입력
2. <textarea> 정의
3. <textarea> 구문
4. <textarea> 속성
5. <textarea> 예제 - 초기값 설정
6. <textarea> 예제 - 태그 작동 X (단, 다른 요소 안으로 주입 시 태그 작동 O)

<textarea> 예제 - 여러 줄 텍스트 입력

<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> 속성

<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>

결과보기