textarea 태그 문법은 아래와 같습니다.
| <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 속성이 지정돼야함.) |
참조 : 지구별안내서