textarea

설명

The textarea (<textarea> HTML element represents a multi-line plain-text editing control.
문자 편집 가능한 텍스트-에디터창을 나타낸다. 기본적으로 여려줄을 적을 수 있는 에디터 창으로, 제목이나 아이디를 넣는 창 같이 한줄짜리 <input>테그와는 구분된다. 단순문자만을 입력할 수 있고, 글꼴등을 설정할 수 없다.

Usage Context

Permitted content	Character data
Tag omission	None, must have both a start tag and an end tag.
Permitted parent elements	Any element that accepts phrasing content
Normative document	HTML 5, section 4.10.3; HTML 4.01, section 17.7

속성

이 엘리먼트는 전역속성을 지원한다.

autofocus(자동활성화) - HTML5

This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.

불리언 속성으로 true/false의 값을 가진다. 웹 페이지가 열릴때 입력창이 자동으로 활성화 되어있어야 하는지 마는지를 결정한다. 물론 사용자가 다른 컨트롤을 사용하기 위해 다른 걸 활성화시킬 수 있다. 한 문서에서 오직 하나의 입력관련요소(form-associated element)에만 이 속성을 설정할 수 있다.

*불리언 속성의  true/false의 값이라 함은 명확한 문서상의 기술이 아닌 경험적 산물이니 이해함에 있어서 주의가 필요합니다.

cols(:COLumn Size 너비)

The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20 (HTML5).

텍스트 컨트롤의 평균 문자에 대한 너비값으로, 양의 정수로 설정해야한다. HTML5에서의 기본값은 20이다.

disabled(비활성)

This Boolean attribute indicates that the user cannot interact with the control. (If this attribute is not specified, the control inherits its setting from the containing element, for example <fieldset>; if there is no containing element with the disabled attribute set, then the control is enabled Unimplemented (see bug 557087 ) .)

불리언 속성으로 설정할 경우 컨트롤이 동작을 하지 않는다. 아래의 readonly(읽기전용)속성과는 달리 거의 모든 예상 동작을 못하게 막는다. 만약 이 속성이 명확하게 정의되지 않으면 자신을 포함하는  다른 상위 컨트롤의 disable 속성을 그대로 이어서 사용하게 됩니다. 예를 들면 filedset을 들 수 있습니다. 다만 disabled 속성이 설정되어 있는 컨트롤이 하나도 없는 경우에는 textarea는 활성화 됩니다. 미구현(557087 버그 참조)

form(양식) - HTML5

The form element that the textarea element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the textarea element must be a descendant of a form element. This attribute enables you to place textarea elements anywhere within a document, not just as descendants of their form elements.

관계된 약식 요소를 정의한다. 이 속성의 값은, 동일한 문서에 있는 양식 요소의 ID가 되어야 한다. 이 속성이 지정되지 않은 텍스트필드 요소는 양식 요소를 상위 요소로 갖고있어야 한다. 이 요소를 통해 양식요소에 구애되지 않고, 문서의 어느곳이든 위치할 수 있다.

maxlength(최대길이) - HTML5

The maximum number of characters (Unicode code points) that the user can enter. If it is not specified, the user can enter an unlimited number of characters.

사용자가 입력 가능한 문자의 최대 개수. 유니코드기준이라 인코딩에 무관하다. 기본은 무제한이다.

name(명칭)

The name of the control.

이 컨트롤의 이름. 

placeholder - HTML5

A hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds.

사용자에게 무엇을 입력해야 하는지 설명해준다. 줄바꿈을 포함할 수 없다. 보통 비어있는 텍스트 필드에 미리 적혀있다가 사용자의 입력이나 활성화와 동시에 사라지는 글귀를 설정할 수 있다.

readonly(읽기전용)

This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.

불리언 속성으로 사용자가 입력/ 수정 불가능하도록 한다. 비활성 속성과는 다르게 클릭이나 영역선택(selecting) 등을 막지는 않는다. 읽기전용일지라도 양식(form)요소가 필요하다.

required(필수입력) - HTML5

This attribute specifies that the user must fill in a value before submitting a form.

양식을 완료하기 전에 반드시 입력이 필요한 요소임을 나타낸다.

rows(:ROW Size 높이)

The number of visible text lines for the control.

컨트롤의 보여지는 텍스트 라인의 수.

selectionDirection(선택방향) - HTML5

The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.

드래깅이 된 경우 어느방향으로 되었는지. LTR의 경우 왼쪽에서 오른쪽 방향으로 RTL의 경우는 오른쪽에서 왼쪽 방향으로 드래깅 되었을 경우 "foward"이며, "backward"는 반대방향으로 드래깅 되었음을 나타낸다. 선택방향을 모를땐 "none"이 된다. LTR은 한글, 영어등을 포함하고 RTL에는 아랍어 같이 오른쪽에서 왼쪽으로 글을 쓰는것이 기본 방향인 언어들이 있다. 프로그램적인 영역지정(찾아서 선택하기 등)이 되었을 경우 "none"이 되겠지.

selectionEnd(선택영역의끝)

The index to the last character in the current selection.

현재의 영역선택에서의 마지막 문자의 위치

selectionStart(선택영역의처음)

The index to the first character in the current selection.

현재의 영역선택에서의 첫 문자의 위치

wrap(줄나누기) - HTML5

Indicates how the control wraps text. Possible values are:
 •hard: The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; the cols attribute must be specified.
 •soft: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks.
If this attribute is not specified, soft is its default value.

컨트롤에서 어떻게 텍스트의 줄을 나눌지에 대한 설정으로 다음과 같은 값을 갖을 수 있다.
*hard : 브라우저는 자동으로 줄바꿈문자(CR+LF)를 넣어 각 줄은 컨트롤의 너비를 넘을 수 없다. 이 값으로 지정하기 위해선 cols속성 또한 설정되어 있어야 한다.
*soft : 브라우저는 모든 줄바꿈이 CR+LF쌍으로 이루어지는 것을 확인하지만, 추가적인 줄바꿈을 추가하지는 않는다.
기본값은 soft이다.
**CR은 횡적인 복귀(carrige return)를 LF는 종적인 한줄추가(Line Feed)를 나타내는 문자인데 인코딩 방법에 따라 둘로 나누기도 하고 LF혼자만 있기도 하고 그렇다. hard와 soft간 문자의 개수가 차이가 나기도 할것이다. 문자길이, 최대길이나 선택영역시작끝 관련되어 줄바꿈을 문자 2개로 취급하는지에 대해 스스로 확인하자.

예제

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

 

DOM Interface

This element implements the HTMLTextAreaElement interface.

호환성

Desktop

기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원	지원	1.0 (1.7 or earlier)	지원	지원	지원
autofocus attribute	지원	4.0 (2.0)		지원	지원
maxlength attribute	지원	4.0 (2.0)		지원	지원
placeholder attribute	지원	4.0 (2.0)		지원	지원

Mobile

기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원	지원	지원	지원	지원	지원
autofocus attribute		4.0 (2.0)
maxlength attribute		4.0 (2.0)
placeholder attribute		4.0 (2.0)

참고

• https://developer.mozilla.org/en/HTML/Element/textarea
• Other form-related elements: <form>, <button>, <datalist>, <legend>, <label>, <select>, <optgroup>, <option>, <input>, <keygen>, <fieldset>, <output>, <progress> and <meter>.