textarea element - by. UXKM

2025-05-16

요약 설명
<textarea> 요소는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 시맨틱 태그로, 단일 줄 입력에 사용하는 <input type="text">와 달리 길고 자유로운 텍스트 입력이 필요한 경우에 사용됩니다.
기본적으로 줄바꿈과 스크롤이 가능한 입력 필드가 생성되며, rows, cols, placeholder, maxlength, readonly, disabled 등의 속성으로 크기와 동작을 제어할 수 있습니다. 사용자가 입력한 텍스트는 폼 전송 시 서버로 전달됩니다.

주요 역할 및 특징

여러 줄 입력 지원
<input>과 달리 줄바꿈이 가능하며, 긴 텍스트 입력에 적합합니다.
기본적으로 크기 조정 가능
- 대부분의 브라우저에서 사용자가 마우스를 이용해 크기를 조절할 수 있습니다.
- CSS의 resize 속성을 사용하여 크기 조정을 제한할 수도 있습니다.
행(rows)과 열(cols) 속성으로 크기 지정 가능
- 입력 필드의 가로(문자 수)와 세로(줄)의 크기 지정이 가능합니다.
- 하지만, CSS의 width와 height 속성을 사용하는 것이 권장됩니다.
자동 줄바꿈 설정 가능 (wrap 속성)
입력 시 줄이 넘칠 경우 자동 줄바꿈 처리 방식 지정이 가능합니다.
HTML 태그를 그대로 입력할 수 있음
<textarea>는 일반 텍스트 입력 필드이므로, 입력된 HTML 태그가 브라우저에서 해석되지 않고 그대로 표시됩니다.

CSS 기본 값

<textarea> 요소는 기본적으로 인라인 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							textarea {
								display: inline-block;
								padding: 2px;
								font-family: monospace;
								overflow-wrap: break-word;
								white-space: pre-wrap;
								background-color: field;
								border: 1px solid rgb(118, 118, 118);
							}

기본 문법

							<textarea></textarea>

속성

`<textarea>` 속성 요약

속성명
설명

name

서버로 전송할 때 사용될 이름 (key)
rows

표시할 줄 수 (세로 크기)
cols

표시할 문자 수 (가로 크기)
placeholder

입력 전 표시되는 안내 텍스트
maxlength

입력 가능한 최대 문자 수
minlength

입력해야 하는 최소 문자 수
readonly

읽기 전용 필드로 설정
disabled

입력 비활성화
required

반드시 입력해야 제출 가능
wrap

줄 바꿈 방식 지정 (soft, hard)
autofocus

페이지 로드시 자동 포커스 설정
form

특정 폼과 연결 (폼 외부에 있을 경우)
spellcheck

맞춤법 검사 활성화 여부

[name] 선택 사항 <textarea name="값">

<textarea> 요소의 이름을 지정하여, 폼 제출 시 해당 필드의 데이터를 식별하고 서버로 전송할 키 값으로 활용됩니다.

								<textarea name="comment"></textarea>

[rows], [cols] 선택 사항 <textarea rows="number" cols="number">

<textarea>의 가로/세로 크기 지정합니다.

rows : 텍스트 영역의 세로(행) 크기를 지정하여 기본적으로 표시되는 줄 수를 설정합니다.
cols : 텍스트 영역의 가로(열) 크기를 지정하여 기본적으로 표시되는 문자 수를 설정합니다.

								<textarea rows="5" cols="30"></textarea>

[placeholder] 선택 사항 <textarea placeholder="값">

입력 필드에 사용자가 입력해야 할 내용을 안내하는 힌트 텍스트를 표시합니다. 사용자가 텍스트를 입력하면 힌트 텍스트는 사라지고, 필드가 비어 있을 때만 보입니다.

								<textarea placeholder="내용을 입력하세요."></textarea>

[minlength], [maxlength] 선택 사항 <textarea minlength="number" maxlength="number">

입력 필드에서 사용자가 입력할 수 있는 문자 수의 범위를 제한하는 속성입니다.

minlength : 입력해야 하는 최소 문자 수를 지정하여, 폼 제출 시 지정된 길이보다 짧으면 유효성 검사를 수행합니다.
maxlength : 입력할 수 있는 최대 문자 수를 제한하여, 사용자가 지정된 길이 이상 입력하지 못하도록 합니다.

								<textarea minlength="10" maxlength="200"></textarea>

[readonly] Boolean - 선택 사항 <textarea readonly>

텍스트 영역을 읽기 전용으로 설정하여, 사용자가 내용을 수정할 수 없도록 합니다. 그러나 폼 제출 시 해당 값은 전송됩니다.

								<textarea readonly>수정할 수 없는 내용</textarea>

[disabled] Boolean - 선택 사항 <textarea disabled>

텍스트 영역을 비활성화하여 사용자가 해당 필드에 값을 입력하거나 조작할 수 없도록 만듭니다. 폼 제출 시 해당 값은 전송되지 않습니다.

								<textarea disabled>입력 불가</textarea>

[required] Boolean - 선택 사항 <textarea required>

필수 입력 필드로 지정하여, 사용자가 폼을 제출하기 전에 반드시 값을 입력하도록 강제합니다.
폼 제출 시 해당 입력 필드가 비어있으면 브라우저는 자동으로 유효성 검사를 수행하고, 사용자가 값을 입력하도록 안내 메시지를 표시합니다.

								<textarea required>필수 입력</textarea>

[wrap] 선택 사항 <textarea wrap="값">

입력된 텍스트가 줄 바꿈될 때의 처리 방식을 지정합니다.

설정 가능한 값 :: soft(기본값) : 자동 줄 바꿈 없이 한 줄로 입력됩니다.; hard : 줄 바꿈이 적용된 상태로 폼이 제출됩니다. (Enter 입력 시 \n이 포함됨)

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

[autofocus] Boolean - 선택 사항 <textarea autofocus>

페이지 로드 시 해당 텍스트 영역에 자동으로 포커스를 설정하여, 사용자가 바로 입력할 수 있도록 합니다.

								<textarea autofocus></textarea>

[form] 선택 사항 <textarea form="form 요소의 id">

<textarea> 요소의 form 속성에 <form> 요소의 id와 같은 값을 지정하여, <textarea> 요소가 <form> 요소 내부에 없더라도 <form>의 데이터로 제출되도록 설정할 수 있습니다.

								<form id="feedbackForm" action="submit.php"></form>

								<textarea name="feedback" form="feedbackForm"></textarea>

[spellcheck] 선택 사항 <textarea spellcheck="값">

철자 및 문법 검사를 활성화하거나 비활성화하여, 브라우저가 자동으로 오타를 감지하고 교정할 수 있도록 설정합니다.

값 :: true : 맞춤법 검사 활성화 (기본적으로 대부분 브라우저에서 활성화됩니다.); false : 맞춤법 검사 비활성화; spellcheck 속성이 없으면 브라우저 기본 설정을 따릅니다.

								<img src="image.jpg" alt="마이크 앞에서 노래를 부르는 아이">