textarea element - by. UXKM

2024-07-30

textarea element 설명

<textarea> 요소는 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용합니다.
텍스트 입력 영역에는 개수의 제한 없이 문자를 입력할 수 있으며, 입력된 문자는 고정폭 글꼴로 렌더링됩니다.
텍스트 입력 영역의 크기는 <textarea> 요소의 cols 속성과 rows 속성으로 지정할 수 있으며, CSS에서 height 속성과 width 속성을 사용하면 더욱 손쉽게 지정할 수 있습니다.

HTML5에서는 <textarea> 요소에 다음과 같은 속성들이 추가되었습니다.
autofocus, dirname, form, maxlength, placeholder, required, wrap

9.9.1. textarea 속성

[cols] <textarea cols="숫자">

텍스트 입력 영역 중 보이는 영역의 너비(width)를 명시합니다(기본값은 20).
텍스트 입력 영역의 크기는 CSS의 height 속성과 width 속성을 사용해도 설정할 수 있습니다.

[rows] <textarea rows="숫자">

텍스트 입력 영역 중 보이는 영역의 라인수를 명시합니다(기본값은 2).
텍스트 입력 영역의 크기는 CSS의 height 속성과 width 속성을 사용해도 설정할 수 있습니다.

[name] <textarea name="텍스트">

<textarea> 요소의 이름을 명시합니다.
name 속성은 폼(form)이 제출된 후 서버에서 폼 데이터(form data)를 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용됩니다.

								<textarea name="ukform"></textarea>

[disabled] <textarea disabled>

해당 <textarea> 요소가 비활성화됨을 명시합니다.
disabled 속성이 명시된 텍스트 입력 영역은 사용할 수 없으며, 사용자가 클릭할 수도 없습니다.
또한, 폼 데이터가 제출될 때도 disabled 속성이 명시된 텍스트 입력 영역의 데이터는 제출되지 않습니다.

따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 텍스트 입력 영역을 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 텍스트 입력 영역을 다시 사용할 수 있도록 조절할 수 있습니다.

disabled 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.

[readonly] <textarea readonly>

<textarea> 요소의 텍스트 입력 영역이 읽기 전용임을 명시합니다.
읽기 전용으로 설정된 텍스트 입력 영역은 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트하거나 복사할 수는 있습니다.
따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 텍스트 입력 영역을 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 readonly 속성값을 삭제하여 사용자가 텍스트 입력 영역을 수정할 수 있도록 조절할 수 있습니다.

disabled 속성이 명시된 텍스트 입력 영역의 값은 서버로 제출되지 않지만, readonly 속성이 명시된 텍스트 입력 영역의 값은 서버로 제출됩니다.

[placeholder] <textarea placeholder="텍스트">

placeholder 속성은 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시합니다.
이러한 도움말은 사용자가 입력할 수 있는 값에 대한 견본 값이나 입력 형식에 대한 간단한 설명 등이 사용되며, 사용자가 입력하기 전까지 입력 필드에 표시되다가 사용자가 입력을 시작하면 사라집니다.

[autofocus] <textarea autofocus>

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

autofocus 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.

								<!-- html5 -->
								<textarea autofocus></textarea>

								<!-- XHTML -->
								<textarea autofocus="autofocus"></textarea>

[dirname] <textarea name="이름" dirname="이름.dir">

dirname 속성은 폼 데이터(form data)가 서버로 제출될 때 서버로 보낼 텍스트 입력 영역의 텍스트 방향성(text directionality)을 저장할 이름을 명시합니다.
dirname 속성값은 언제나 <textarea> 요소의 name 속성값 뒤에 ".dir"를 추가한 값이 됩니다.

								<textarea dirname="intro.dir"></textarea>

[form] <textarea form="form id">

해당 <textarea> 요소가 포함될 하나 이상의 <form> 요소를 명시합니다.
이 속성값은 같은 문서 내에 위치하는 <form> 요소의 id 값이어야만 합니다.

								<textarea form="myForm"></textarea>

[maxlength] <textarea maxlength="숫자">

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

[required] <textarea required>

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

required 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.

[wrap] <textarea wrap="soft | hard">

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

soft
기본값으로, 폼 데이터가 서버로 제출될 때 입력된 텍스트를 줄바꿈하지 않음.
hard
폼 데이터가 서버로 제출될 때 입력된 텍스트를 줄바꿈합니다. 단, hard 속성값을 사용할 경우에는 반드시 cols 속성이 명시되어 있어야 합니다.

								<textarea wrap="hard"></textarea>