9.9 textarea 요소
textarea 요소는 사용자가 여러 라인으로 구성된 텍스트 문장을 입력해야 할 때 사용할 수 있는 요소로 다음과 같은 고유한 속성들을 이용할 수 있습니다.
|
속성 |
기능 |
|
autofocus |
페이지가 로드될 때 자동적으로 포커싱되도록 하는데 사용 |
|
cols |
입력 가능한 열의 수를 설정. 하나의 열은 영문자 한 글자를 의미. 한글은 2열을 차지하게 됨 |
|
disable |
사용자로부터 textarea 요소의 어떠한 변경도 받아들이지 않을 때 사용 |
|
form |
textarea 요소가 속하는 form을 명시할 때 사용 |
|
maxlength |
최대 입력 가능한 문자의 수를 설정 |
|
name |
textarea 요소의 이름 |
|
placeholder |
사용자로 하여금 textarea에 어떤 내용을 입력해야 할지 알려주는 간단한 힌트 |
|
readonly |
읽기 전용을 설정 |
|
required |
textarea가 반드시 입력되어야 하는지를 설정 |
|
rows |
textarea의 높이(height)를 설정. 높이는 정수형태로 설정하며 설정하지 않으면 기본적으로 2라인 보이는 형태 |
|
wrap |
줄바꿈 문자들 CR(Carriage Return) + LF(Line Feed)를 자동적으로 추가할 지 안할지를 설정하는 속성으로 기본적으로 속성값은 줄바꿈 문자를 포함하지 않는 “soft”를 가지며 만일 줄바꿈 문자들을 포함하고자 할 경우는 cols 속성이 설정된 상태에서 warp=”hard” 형태로 설정하여 사용 |
이제 메모장을 열어서 기본적인 코드를 작성하고 다음과 같이 <body> 시작태그와 마침 태그 안에 코드를 작성합니다.
<body>
<form id="userInfo">
이름 : <input type="text"
name="userName"><br/><br/>
<textarea
form="userInfo" name="txauserDetails"
cols="20">
</textarea>
</form>
</body>
위에서 보는 것처럼 form 요소의 id 속성값으로 설정된 “userInfo”에 대해서 textarea 요소에서 form 속성값으로 “userInfo”을 설정함으로 textarea 요소가 id가 “userInfo”인 form에 속함을 나타내고 입력가능한 열 수는 20으로 설정했습니다. 즉 한 라인에 영문자는 20자, 한글은 10자까지 입력 가능함을 의미하는 것입니다. 이제 이렇게 작성이 완료되었으면 "textareaEx.html"으로 저장하고 Firefox를 통해 열어보면 다음과 같이 나타나게 됩니다.
이제 명시적으로 설정된 rows 속성과 자동적으로 rows 속성이 2로 설정된 것을 확인하기 위해 다음과 같이 입력해봅니다.
위 결과에서
보는 것처럼 영문자는 20자, 한글은 10자가 cols 속성값 20에
의해서 입력 가능하고 또한 rows 속성값을 설정하지 않았더라도 기본적으로 2라인이 입력가능한 형태의 높이로 설정되며 입력되는 텍스트가 증가하면 자동적으로 스크롤됨을 알 수 있습니다.
이제 autofocus, maxlength 속성에 대해서 알아볼까요? 방금 전 사용한 예제를 메모장으로 열어서 다음과 기존의 textarea 요소의 시작, 마침 태그를 수정합니다.
<textarea
autofocus="autofocus" maxlength="10" >
</textarea>
저장한 후 FireFox를 이용하여 열어보면 다음과
같이 textarea에 입력 가능하도록 커서가 위치하게 되는 것을 알 수 있으며 최대 10자까지 입력 가능한 것을 보여줍니다.
placeholder
속성은 textarea 영역이 비어있을 때 나타나고
해당 영역에 포커스 즉 커서가 위치하면 사라지게 됩니다. 따라서
autofocus 속성이 설정된 textarea에서는
placeholder 속성이 설정되어 있어도 확인 불가능한 것입니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 9.11 output 요소 (0) | 2013.07.31 |
|---|---|
| 9.10 keygen 요소 (3) | 2013.07.31 |
| 9.8 option, optgroup 요소 (2) | 2013.07.31 |
| 9.7 datalist 요소 (3) | 2013.07.31 |
| 9.6 select 요소 (0) | 2013.07.31 |