html/css 독학하기

textarea

토픽 html/css 독학하기 > html사전

설명

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)      

참고

댓글

댓글 본문
  1. Albert.q.park
    ..textarea의 boolean 속성은 true/false를 갖는다는 말인가요? @_@) 어질어질 일단 최상단의 boolean속성에 해당설명을 애매하게(-_-);; 붙여놓았습니다.
    대화보기
    • engfordev
      Erin Js Lee님이 주신 댓글입니다. * * *
      textarea는 boolean 속성으로 true/false의 값을 가진다. 그리고 이 속성에 따라 textarea가 유저의 사용가능 여부가 결정된다.
      (물론 html에서 boolean 속성들은 true/false가 아니라 값이 set되어 있느냐 되어 있지 않느냐로 판단하는 경우가 대부분으로 yes, no로 결과가 돌아오기도 하고 설정되어 있지 않으면 아무런 값을 리턴하지 않는 경우가 false를 주는 경우보다 훨씬 많습니다. 대부분입니다. 저도 번역하면서 고민했던 부분인데 true/false로 기록해두고 추가적인 설명이 있다면 좋을 것으로 생각됩니다.)
      만약 이 속성이 명확하게 정의되지 않으면 자신의 상위 그러니까 자신을 포함하는 다른 컨트롤의 disable의 속성을 그대로 이어서 사용하게 됩니다. 예를 들면 filedset을 들 수 있습니다. 다만 disabled 속성이 설정되어 있는 컨트롤이 하나도 없는 경우에는 textarea의 disabled의 속성은 enable이 되어야합니다만. 아직 이 부분은 미구현되었습니다.
    • Albert.q.park
      문자길이, 최대길이나 선택영역시작끝 관련되어 줄바꿈 문자(CR+LF)가 문자 2개로 취급되는지 1개로 취급되는지 0개로 취급되는지 아시는 분 계신가요?
    • 진우
      구현에 버그가 있었다는 부분은 disabled의 상속에 대한거죠?Twit Lingua님의 고민처럼 textarea가 disabled속성을 갖는 부모요소를 갖지 않는다고 해서 기본이 disabled이진 않았을거 같구요;
      대화보기
      • Surpreem
        4번은 이해하신 내용이 맞습니다. 구현되어 있지 않다는 것은 당시 Mozilla 구현에 버그가 있어서 그런 것이고 자세한 내용은 해당 버그 리포트 번호(https://bugzilla.mozilla.org/s... 보시면 됩니다.
        원문을 여기로 가져와서 다시 번역하는 과정에서 착오가 생기나 봅니다. ^^
        대화보기
        • 진우
          disabled 속성관련 제 의견입니다~ (확실한건 아니구요^^;)
          '불리언 속성으로 설정할 경우 컨트롤이 동작을 하지 않는다' 부분은'불리언 속성으로, 설정할 경우 컨트롤은 동작하지 않는다'가 좀 더 자연스러운 것 같구요..
          상속 관련은 바로 뒤에 'disabled 속성이 설정된 부모요소가 없으면 활성화 된다'는 부분으로 봤을때 Twit Lingua님 말씀처럼 부모컨테이너 요소의 disabled 속성을 상속한다는것 같네요..
          그리고 원문의 버그 557087을 참고했을때, 구현되지 않은 부분은 fieldset 엘리먼트의 disabled 속성 같네요
          이상입니다~ 수고 많으세요.. ;)
        • engfordev
          1. 에공.. 불리언이, true나 false의 값을 가지는 게 아니군요!! 잘 알지도 못하면서 막 쓰고 ㅜㅜ 개발지식이 없으니 이해 부탁드리고요. 다시 확인해주셔서 감사합니다!!
          3. 일단 고민하는 지점들을 잘 써두기로 하고요, 조금 더 읽기 편한 번역으로 수정하는 기회는 있을 거예요 :)
          4번에 대해서.. 일단 containing element는 영어문장과 앞에서 예로 든 <fieldset>을 생각해보면.. textarea '를' 자식으로 갖는 부모 요소라고 생각해요. 그런데 그 부모 요소의 disabled 속성이 지정되어 있지 않으면..
          제가 이해한 바는.. disabled 속성값이 지정되어 있는 부모 요소, textarea를 자식으로 가지는 부모 요소가 없는 경우에는.. textarea는 enabled된다..
          이렇게 이해했어요. 훔. 근데 이상하네요. 제가 이해한 바가 맞다면 하튼 부모 요소가 없으면 textarea는 디폴트로 enabled된다는 의미일텐데, 그게 구현되고 말고 할게 어딨다는 걸까요? OTL
          제가 이해한 게 안 맞다는 생각이 치켜드네요. 다른 분의 도움을 구해봐야겠습니다. ㅜㅜ</fieldset>
          대화보기
          • Albert.q.park
            ㅎㅎ 편집하면서는 댓글을 볼수가 없는 단점이... 창두개 띄우고 작업합니다.ㅋㅋ1. Unimplemented가 앞 문장과 분리된건지 해깔려서 번역이 안되었는데, 확실히 분리된걸로 해석하면 명확합니다. 저런 단어는 보통 영어가 아닌 기술단어로 읽어 맞춤표 없는 대문자도 보통 분리된 문장으로 보지 않는 버릇이 들어서 오히려 고생했습니다. ㅎㅎ2. 저도 몰랐었는데 HTML5.0의 불리언(이진) 값은 true나 false의 값을 갖는것이 아니라, 속성 자체가 그냥 설정되어있느냐 아니냐에 따라 구분되는 거더라구요~3. 참고하여 수정하였으나 Disabled과 아래쪽 ReadOnly의 설정의 차이 까지 설명에 녹아들어야 하기에 아직도 읽기 불편한 번역으로 계속 나갑니다. ㅠ_ㅜ
            4. if there is no containing element with the disabled attribute set, 이거 해석을 어떻게 해야 하는지 조금 고민입니다. 직역으론 '비활성 attribute set에 포함된 element가 없다면' 인데, 제가 보기엔 <fieldset> 속에 하나의 컨트롤이라도 disable되면 <fieldset> 전체가 disable되어야 한다는 의미로 읽혀 번역이 저렇게 되었는데 어떻게 생각하시나요?</fieldset></fieldset>
            대화보기
            • engfordev
              수고가 많으십니다~
              요 부분, 어케 코멘트를 드려야 할까 생각하다, 저도 나름대로 번역해 봤어요. 함 비교해 보시고, 적절히 적용 부탁해요 :)
              disabled(비활성)
              disabled 속성의 값은 true나 false중의 하나의 값을 가지며, 사용자가 이 textarea에 입력 등을 할 수 있는상태인지 여부를 나타낸다. 이 속성의 값이 지정되어 있지 않은 경우, 부모 요소의 disabled 속성값이 적용된다. 부모 요소의 예로는 <fieldset>같은 요소가 있다. disabled 속성값이 지정되어 있는 부모 요소가 없는 경우에 사용자는 textarea를 사용할 수 있는 상태가 된다. (구현되지 않은 상태이다. 버그레포트 557087 참조)</fieldset>