..

Search

<textarea>

HTML <textarea> 태그


정의 및 특징

<textarea> 태그는 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용합니다.

 

텍스트 입력 영역에는 개수의 제한 없이 문자를 입력할 수 있으며, 입력된 문자는 고정폭 글꼴로 렌더링됩니다.

텍스트 입력 영역의 크기는 <textarea> 요소의 cols 속성과 rows 속성으로 지정할 수 있으며, CSS에서 height 속성과 width 속성을 사용하면 더욱 손쉽게 지정할 수 있습니다.


예제
<form action="/examples/media/action_target.php" method="get">
    <textarea name="opinion" cols="30" rows="5"></textarea><br>
    <input type="submit">
</form>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<textarea> 지원함 지원함 지원함 지원함 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 <textarea> 태그에 다음과 같은 속성들이 추가되었습니다.

- autofocus, dirname, form, maxlength, placeholder, required, wrap


사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된  속성

속성명   속성값 설명

autofocus

html5

autofocus

페이지가 로드될 때 자동으로 포커스가 <textarea> 요소로 이동됨을 명시함.

cols

 

숫자

텍스트 입력 영역 중 보이는 영역의 너비를 명시함.

dirname

html5

textareaname.dir

폼 데이터(form data)가 서버로 제출될 때 서버로 보낼 텍스트 입력 영역의 텍스트 방향성(text directionality)을 저장할 이름을 명시함. (언제나 이름 뒤에 “.dir”를 추가함)

disabled

 

disabled

해당 <textarea> 요소가 비활성화됨을 명시함.

form

html5

form id

해당 <textarea> 요소가 포함될 하나 이상의 <form> 요소를 명시함.

maxlength

html5

숫자

<textarea> 요소에서 허용되는 최대 문자수를 명시함.

name

 

텍스트

<textarea> 요소의 이름을 명시함.

placeholder

html5

텍스트

<textarea> 요소에 입력될 값에 대한 짧은 힌트를 명시함.

readonly

 

readonly

<textarea> 요소의 텍스트 입력 영역이 읽기 전용임을 명시함.

required

html5

required

폼 데이터(form data)가 서버로 제출되기 전 텍스트 입력 영역이 반드시 채워져 있어야 함을 명시함.

rows

 

숫자

텍스트 입력 영역 중 보이는 영역의 라인수를 명시함.

wrap

html5

hard

soft

폼 데이터(form data)가 서버로 제출될 때 입력된 텍스트의 줄바꿈(wrap) 방식을 명시함.


DOM 인터페이스

interface HTMLTextAreaElement : HTMLElement {

  attribute DOMString autocomplete;

  attribute boolean autofocus;

  attribute unsigned long cols;

  attribute DOMString dirName;

  attribute boolean disabled;

  readonly attribute HTMLFormElement? form;

  attribute long maxLength;

  attribute long minLength;

  attribute DOMString name;

  attribute DOMString placeholder;

  attribute boolean readOnly;

  attribute boolean _required;

  attribute unsigned long rows;

  attribute DOMString wrap;

 

  readonly attribute DOMString type;

  attribute DOMString defaultValue;

  [TreatNullAs=EmptyString] attribute DOMString value;

  readonly attribute unsigned long textLength;

 

  readonly attribute boolean willValidate;

  readonly attribute ValidityState validity;

  readonly attribute DOMString validationMessage;

  boolean checkValidity();

  boolean reportValidity();

  void setCustomValidity(DOMString error);

 

  [SameObject] readonly attribute NodeList labels;

 

  void select();

  attribute unsigned long? selectionStart;

  attribute unsigned long? selectionEnd;

  attribute DOMString? selectionDirection;

  void setRangeText(DOMString replacement);

  void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");

  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);

};


연관 페이지

HTML Form 요소 수업 ⇒


연습문제