- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
- <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- </head>
- <body>
- <form> - <textarea> 사용법<br />
- <b><textarea> 여러 줄의 텍스트 입력 제어를 정의합니다.</b><br /><br />
- ( 속성- cols, rows, disabled, name ) <br />
- ( HTML5추가 속성-autofocus, placeholder, wrap <br />
- <span style="padding-left:140px;"></span>-> 브라우저가 덜 지원하는 속성 <br />
- <span style="padding-left:140px;"></span>form, maxlength, required ) <br />
- <br />
- <textarea> 텍스트 영역의 문자를 무제한으로 보유 할 수 있으며, <br />
- 텍스트는 고정 폭 글꼴에서 렌더링합니다.(usually Courier) <br />
- 텍스트 영역의 크기는 CSS 통해 높이와 넓이 속성을 통해 더 나은 <br />
- cols 그리고 rows 속성을 지정할수 있습니다.<br />
- <textarea> 태그는 직접 해보셔야 이해가 빠릅니다. <br />
- <br />
- <hr />
- <div id="ex_view2">
- <script type="text/javascript" language="javascript">
- <!--
- /* 파일 불러올때 텍스트아레아 높이 가져오기
- 아래 window처럼 해야 하는데 예제는 숨겨져 있으니 안됨
- 버튼에 클릭 이벤트에 추가했다는거만 틀립니다.*/
- window.onload = function(){
- save_textarea_height = document.getElementById('atte_rows').scrollHeight;
- }
- /* 텍스트상자 클릭시 빈칸으로 초기화 */
- function resize(tarea_obj) {
- if(tarea_obj.scrollHeight > tarea_obj.clientHeight){
- tarea_obj.style.height = (1+tarea_obj.scrollHeight)+"px";
- }
- else if((event.keyCode==8 || event.keyCode==46) && tarea_obj.scrollHeight > save_textarea_height){
- /* 백스페이드 키와 delete키 삭제시 아레아 창 줄어들기 */
- tarea_obj.style.height = "1px";
- tarea_obj.style.height = (1+tarea_obj.scrollHeight)+"px";
- /* 만약 삭제할때 높이가 save_textarea_height 보다 작다면
- 기본 설정 높이로 초기화 */
- if(tarea_obj.scrollHeight < save_textarea_height){
- tarea_obj.style.height = save_textarea_height+"px";
- }
- }
- /* else는 쓰기 애매함 */
- /* 참조(http://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length)
- function resize(obj) {
- obj.style.height = "1px";
- obj.style.height = (20+obj.scrollHeight)+"px";
- }
- el . style . height =
- ( el . scrollHeight > el . clientHeight ) ? ( el . scrollHeight )+ "px" : "60px" ;
- */
- }
- //-->
- </script>
- <style type="text/css">
- <!--
- .textarea_atte_value{ border-collapse:collapse; }
- .textarea_atte_value th{ text-align:left; }
- .textarea_atte_value td{ padding-left:10px; }
- .textarea_atte_value textarea{height:auto; !important;}
- -->
- </style>
- <form name="textarea_type" id="textarea_type" method="post" >
- <!-- 예제 박스에선 안됨 => form태그안에 form태그있으면 지워짐~ㅠ.ㅠ -->
- <p><b>예제 - <textarea>속성 cols값 리스트</b></p>
- <table border=1 class="textarea_atte_value">
- <tr>
- <th><textarea cols="60"=></th><td>
- <textarea cols="60" name="atte_cols" id="atte_cols"></textarea></td>
- </tr>
- </table>
- <p><b>예제 - <textarea>속성 rows값 리스트</b></p>
- <p>자바스크립트로 rows 이상의 줄일때 화면 높이 조절</p>
- <table border=1 class="textarea_atte_value">
- <tr>
- <th><textarea rows="4"=></th><td>
- <textarea rows="4" cols="60" name="atte_rows" id="atte_rows" onkeyup="resize(this)"></textarea></td>
- </tr>
- </table>
- <p><b>예제 - <textarea>속성 disabled값 리스트</b></p>
- <table border=1 class="textarea_atte_value">
- <tr>
- <th><textarea disabled=></th><td>
- <textarea disabled rows="4" cols="60" name="atte_disabled" id="atte_disabled" >입력금지</textarea></td>
- </tr>
- </table>
- <p><b>예제 - <name>속성(이름지정)이건 생략...무진장 썼기 때문<br /></b></p>
- </form>
- </div>
- </body>
- </html>
--------------------------------------------------------------------------------------------
위 소스 예제 보기
<textarea> 여러 줄의 텍스트 입력 제어를 정의합니다.
속성-cols, rows, disabled, name
HTML5추가 속성-autofocus, placeholder, wrap
브라우저가 덜 지원하는 속성(HTML5추가 속성)
form, maxlength, required
위 소스에서는 HTML5추가 속성은 생략했습니다.
그외 XHTML 소스의 예제는 위에서 보기로 보시고
아래 버튼 클릭하시면 설명이 나옵니다.
태그 속성 보기(접어두었습니다.)
Global Attributes 지원합니다.
'HTML > xhtml문법' 카테고리의 다른 글
<form> - <select> <option> <optgroup> 선택 목록 작성 (0) | 2014.01.24 |
---|---|
<button></button> 클릭 할 수 있는 버튼 생성 (0) | 2014.01.24 |
<form>-<input>, <input /> <label></label> 입력 필드 지정 (0) | 2014.01.22 |
<form></form> 폼 양식 속성 설명 (0) | 2014.01.22 |
<table> - 부가기능 태그들 사용법(<caption><colgroup><col><span><thead><tbody><tfoot>) (0) | 2014.01.22 |