7. <TEXTAREA> 속성. -html-

7. <TEXTAREA> 속성. -html-

 

1. 기본

<textarea></textarea>

시작태그와 끝태그 사이에 공백이 있으면 모두 표시됨.

예

<textarea> 공백문자

여기가 문장의 시작입니다.

</textarea>

위와 같이 공백문자가 자리하고 있다면 그만큼 간격을 띄우고 출력되어 버린다.

여기 예에서는 위에 한 줄을 띄우고 출력이 된다.

<textarea>여기가 문장의 시작입니다.</textarea> <--이렇게 쓸 것을 추천함.

 

2. 속성값

* cols - 가로 텍스트 수. 지정한 크기가 넘어가면 다음 줄로 자동으로 넘어감.

* rows - 세로 텍스트 수. 지정한 크기가 넘어가면 스크롤이 생김.

TEXTAREA 에 width, height를 줄 경우 cols, roes의 속성 적용이 안 됨.

 

* name - 요소 이름 지정

 

* readonly/disabled (둘 중 하나만 사용 가능)

-readonly - 클릭은 되지만 텍스트를 입력할 수 없음(읽기 전용. 수정 불가)

readonly="readonly"

-disabled - 클릭조차 되지 않음 (복사 불가)

disabled="disabled" (자동으로 textarea 색이 회색으로 변함)

 

* onclick="this.select()" onfocus="this.select()"

- textarea 태그 속의 내용을 마우스로 클릭하거나 focus되면 자동으로 선택되도록 한다.

 

* onfocus="if(this.value=='제목'){this.value=''};$(this).attr('style','color:#000')"

* onblur="if(this.value==''){this.value='제목'}"

-회원 가입 박스에 많이 쓰인다. 박스 안에 '제목'이 초기값으로 보이다가 focus가 되면 글자가 지워지고 입력을 받을 준비를 하다가 빈 값으로 blur되면 다시 '제목'이라는 글자가 나타난다.

<input> 박스에서도 사용될 수 있다.

 

3. RESIZE

IE는 안되지만, 그 외에 사파리, 크롬에서는 textarea의 오른쪽 아래에 삼각형 표시를 이용해서 마우스로 (CSS 관계없이) 크기를 조절할 수 있다.

 

style="textarea {resize:XXXX;}"

none : 조절 불가

both : 가로/세로 조절 가능

horizontal : 가로 조절만 가능

vertical : 세로 조절만 가능

 

4. 스크롤 관련

style="overflow:XXXX"

모두숨김 hidden

모두보임 scroll

세로숨김 overflow-y:hidden

세로보임 overflow-y:scroll

가로숨김 overflow-x:hidden

가로보임overlow-x:scroll

예

<textarea cols="숫자" rows="숫자" name="요소이름" readonly/disabled(단독사용)></textarea>