[html] textarea 태그

 

 

[html] textarea 태그

 

지난 시간에 input 태그의 type 속성을 배우면서

 

[html] input type 속성

 

tyep="text"는 한 줄의 텍스트 입력 창을 만든다고 했습니다.

 

예]

<form>

ID: <input type="text" name="id">

</form>

 

▶실행화면

 

 

 

TEXTAREA 태그

 

textarea 태그는 여러줄의 텍스트를 입력하는 창을 만듭니다.

 

문법: <textarea> 내용 </textarea>

 

텍스트 창의 너비와 높이는 cols, rows 속성으로 지정하는데

 

css의 width와 height 값으로 지정할 수도 있습니다.

 

css에서 width, height 값을 설정하면 cols, rows 속성을이무시됩니다.

 

▶함께 사용할 수 있는 속성

 

cols	숫자	텍스트 영역이 보이는 너비 . 기본값 20
rows	숫자	텍스트 영역에서 보이는 줄의 개수. 기본값 2
disabled	disabled	텍스트 영역이 비활성화
name	text	텍스트 영역의 이름
readonly	readonly	텍스트 영역이 읽기만 가능함.
↓↓html5에 새로 추가된 속성↓↓
autofocus	autofocus	텍스트 영역이 자동으로 포커스됨
		문법: <textarea autofocus>,    xhtml에서는 <textarea autofocus="autofocus"> 지원브라우저: ie10+ chrome, ff, opera, safari
form	form_id	<textarea>요소가 속한 form 요소를 지정
		속성값은 <form>요소의 id 속성이 되어야 함 문법:<textarea form="id명"> 지원브라우저: ie 제외하고 주요 브라우저 지원
maxlength	숫자	텍스트 영역에서 허락된 문자의 최대 숫자 지원브라우저: ie10+, chrome, ff, opera 15+, safari
placeholder	text	텍스트 영역의 예상 값을 설명하는 짧은 힌트
		영역이 비면 나타나고, 영역이 포커스 되면 사라짐 지원브라우저: ie10+ chrome, ff, opera, safari
required	required	텍스트 입력이 필수임을 나타냄 문법: <textarea required> xhtml에서는 <textarea required="required"> 지원브라우저: ie10+ chrome, ff, opera, safari
wrap	hard/soft	텍스트 줄바꿈 지정
	soft	기본값, 줄바꿈 되지 않음
	hard	줄바꿈 됨. hard를 사용하려면 cols 속성이 지정돼야 함.

 

 

 

html/css 작성 예를 보겠습니다~
 

html

 <form action="url" id="inform">
이름: <input type="text" name="id"> <br>
비밀번호: <input type="password" name="psd">
<p>
<h3>서태지 '소격동' 당신의 감상평은? </h3>
<textarea name="review" form="inform" cols="40" rows="10" autofocus required wrap="hard" placeholder="서태지의 소격동은... "> 감상평을 남겨주세요 </textarea>
</p>
 <input type="submit">
</form>

 

 

 

css

form{
background-color:#D9E5FF;
width: 350px;
height: 300px;
border: 1px solid #B2CCFF;
padding: 20px;
} 

 

 

▶실행 화면

 

 

원래 textarea 초기화면은 '감상평을 남겨주세요' 인데

 

내용을 전부 지우면 '서태지의 소격동은...' 이란 문구가 나옵니다 (placeholder 속성 사용)

 

아무 내용을 입력하지 않고 [제출] 버튼을 누르면 '이 입력란을 작성하세요'라는 문구가 나옵니다. (required 속성 사용)

 

소스는 아래 파일 참조해 주세요

textarea.htm

 

 

   

[html] input 태그

 

form 태그(html 양식 만들기)

 

[html] pre, code 태그 차이

 

[css3] :empty 가상 클래스

 

[css3] opacity 속성(투명도 지정)