HTML <textarea>: 입력 영역 요소

HTML <textarea> 요소는 여러 줄의 평문을 편집할 수 있는 컨트롤을 제공합니다. 사용자가 자유 형식의 긴 글을 입력할 수 있어야 하는 리뷰나 피드백 입력 칸에 유용합니다.

<label for="story">무슨 일이 있었나요?</label>

<textarea id="story" name="story" rows="5" cols="33">
어둡고 추운 밤이었습니다...
</textarea>

label {
  display: block;
  margin-bottom: 0.5em;
}

위 예제에서 <textarea>의 주요 사용법을 볼 수 있습니다.

• id 특성을 지정하고 <label> 요소에 연결해 접근성을 확보합니다.
• 서버에 양식을 제출할 때 데이터의 이름으로 사용할 값을 name 특성에 지정합니다.
• rows와 cols 특성으로 <textarea>의 크기를 설정할 수 있습니다.
• 기본 입력 값의 내용을 여는 태그와 닫는 태그의 사이에 배치합니다. <input>과 달리, <textarea>에는 value 특성을 사용할 수 없습니다.

일반적인 양식 입력 칸이 받는 autocomplete, autofocus, disabled, placeholder, readonly, required 특성도 사용 가능합니다.

특성

전역 특성을 포함합니다.

autocomplete

사용자 에이전트의 자동완성 기능에 제공하는 힌트입니다. HTML autocomplete 특성 문서을 참고하세요.

cols

텍스트 컨트롤의 너비를 평균 문자 너비 단위로 지정합니다. 자연수를 사용해야 합니다. 기본 값은 20입니다.

disabled

지정할 경우 사용자와의 상호작용을 막는 불리언 특성입니다.

form

이 컨트롤을 양식 소유자(<form> 요소)와 연결합니다. 같은 문서 상에 존재하는 <form>의 id 값을 지정하세요. 이 특성이 존재하지 않으면 컨트롤의 양식 소유자는 가장 가까운 조상 <form>이 됩니다.

form 특성을 사용하면 <input>이 <form>의 자손이 아니어도 연결할 수 있으며, form 특성이 가리키는 <form>이 조상 <form>보다 우선합니다.

maxlength

입력 값의 유효한 최대 문자(UTF-16 코드 유닛) 길이를 지정합니다. 0 이상의 정수만 지정할 수 있습니다. 유효하지 않은 값을 지정한 경우 무시합니다.

minlength

입력 값의 유효한 최소 문자(UTF-16 코드 유닛) 길이를 지정합니다. 0 이상의 정수만 지정할 수 있습니다. 유효하지 않은 값을 지정한 경우 무시합니다.

name

컨트롤의 이름을 지정합니다. 양식을 제출할 때 값과 함께 이름/값 쌍을 구성합니다. 비록 명세 상으로는 name이 필수 특성은 아니지만, 지정하지 않으면 양식 제출 데이터에 포함되지 않으므로 필수로 간주해도 무리가 없습니다.

placeholder

사용자가 입력해야 하는 값을 간략하게 알려줄 텍스트를 지정합니다. 값이 개행 문자를 포함해서는 안됩니다. placeholder는 이 입력 칸의 설명을 제공하는 것이 아니라, 기대하는 데이터의 유형을 나타내야 합니다. 예컨대 레이블이 “이름”인 텍스트 입력 칸의 placeholder에 어울리는 값은 “김철수”입니다.

placeholder는 양식을 설명할 수 있는 다른 방법에 비해 적합하지 않으며 예상하지 못한 기술적 문제를 유발할 수 있습니다. <input> 문서의 레이블 항목을 참고하세요.

readonly

사용자가 값을 편집할 수 없도록 하는 불리언 특성입니다.

rows

텍스트 컨트롤의 높이를 줄 수로 지정합니다. 자연수를 사용해야 합니다. 기본 값은 2입니다.

wrap

입력한 텍스트의 줄바꿈 규칙을 지정합니다. 가능한 값은 다음과 같습니다.

• hard: 브라우저가 자동으로 개행 문자(CR+LF)를 삽입해서 각 줄이 컨트롤 밖으로 넘치지 않도록 합니다. 이 값을 사용하려면 cols 특성을 지정해야 합니다.
• soft: 브라우저가 모든 개행 문자를 CR과 LF 쌍으로 변환하지만 새로운 개행 문자를 삽입하지는 않습니다.

기본 값은 soft입니다.

CSS 스타일링

<textarea>는 대체 요소로, 마치 래스터 이미지처럼 요소가 내재된 크기를 가지고 있습니다. 기본 스타일에서 <textarea>의 display 값은 inline-block입니다. 다른 양식 요소와 비교하면 <textarea>는 스타일 적용이 수월한 편으로 박스 모델과 글꼴, 색상 등을 평범한 CSS로 바꿀 수 있습니다.

불분명한 기준선

HTML 명세는 <textarea>의 기준선(baseline)이 어디인지 명시하지 않았으므로 브라우저마다 서로 다른 위치를 기준선으로 삼았습니다. 따라서 <textarea>에 vertical-align: baseline을 사용했을 때의 동작은 분명하지 않습니다. 사용을 지양하세요.

크기 조절 가능 여부 설정

대부분의 브라우저에서는 <textarea>의 오른쪽 아래 꼭지점을 드래그해서 크기를 바꿀 수 있습니다. 크기 조절 기능은 CSS resize 속성으로 설정할 수 있습니다.

textarea {
  resize: none; /* 모든 <textarea>의 크기 조절 비활성화 */
}

명세

HTML Standard

브라우저 호환성