Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

web sprit

[HTML5] textarea 태그 본문

웹5/HTML5

[HTML5] textarea 태그

커드만 2016. 10. 17. 17:06

textarea 태그 문법은 아래와 같습니다.

1
2
3
 
<textarea name="" id="" cols="30" rows="10"></textarea>
 
cs



textarea 태그의 속성값 중 cols, rows 는 css 의 width 와 height 값으로 customize가 가능하기 떄문에 따로 태그에 넣을 필요는 없습니다.


자 그럼 textarea 태그의 속성들이 무엇이 있는지 알아봐야 겠네요. 기존의 사용하던 속성부터 html5에서 새롭게 추가되어진 속성들을 알아보겠습니다.


* 기본 속성

 속성

 값

 설명

 cols

 숫자

 너비

 rows

 숫자

 높이

 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, opera15+, safari

 placeholder

 text

 입력 영역에 대한 간단 설명을 넣을 수 있음.

지원브라우저 : ie10+, chrome, ff, opera, safari

 required

 required

 텍스트 입력이 필수임을 나타냄.
문법 : <textarea required>
xhtml에서는 <textarea required="requiered">

지원브라우저 : ie10+, chrome, ff, opera, safari

 wrap

 hard/soft
 soft
 hard

 텍스트 줄바꿈 지정
 기본값(줄바꿈 되지 않음)
 줄바꿈 됨.(hard를 사용하려면 cols 속성이 지정돼야함.)




참조 : 지구별안내서

Comments