코딩의 시작, TCP School

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>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명
<textarea>	지원함	지원함	지원함	지원함	지원함	지원함

HTML5에서 변경된 사항

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

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

사용할 수 있는 속성

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

속성명	속성값	설명
autofocus	autofocus	페이지가 로드될 때 자동으로 포커스가 <textarea> 요소로 이동됨을 명시함.
cols	숫자	텍스트 입력 영역 중 보이는 영역의 너비를 명시함.
dirname	textareaname.dir	폼 데이터(form data)가 서버로 제출될 때 서버로 보낼 텍스트 입력 영역의 텍스트 방향성(text directionality)을 저장할 이름을 명시함. (언제나 이름 뒤에 “.dir”를 추가함)
disabled	disabled	해당 <textarea> 요소가 비활성화됨을 명시함.
form	form id	해당 <textarea> 요소가 포함될 하나 이상의 <form> 요소를 명시함.
maxlength	숫자	<textarea> 요소에서 허용되는 최대 문자수를 명시함.
name	텍스트	<textarea> 요소의 이름을 명시함.
placeholder	텍스트	<textarea> 요소에 입력될 값에 대한 짧은 힌트를 명시함.
readonly	readonly	<textarea> 요소의 텍스트 입력 영역이 읽기 전용임을 명시함.
required	required	폼 데이터(form data)가 서버로 제출되기 전 텍스트 입력 영역이 반드시 채워져 있어야 함을 명시함.
rows	숫자	텍스트 입력 영역 중 보이는 영역의 라인수를 명시함.
wrap	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 요소 수업 ⇒

연습문제

◀ 이전 다음 ▶

Search

<textarea>