textarea element - by. UXKM

  • Publishing
  • HTML
  • 폼 콘텐츠(Forms content)
  • textarea element
요약 설명

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

주요 역할 및 특징

  1. 여러 줄 입력 지원

    <input>과 달리 줄바꿈이 가능하며, 긴 텍스트 입력에 적합합니다.

  2. 기본적으로 크기 조정 가능
    • 대부분의 브라우저에서 사용자가 마우스를 이용해 크기를 조절할 수 있습니다.
    • CSS의 resize 속성을 사용하여 크기 조정을 제한할 수도 있습니다.
  3. 행(rows)과 열(cols) 속성으로 크기 지정 가능
    • 입력 필드의 가로(문자 수)와 세로(줄)의 크기 지정이 가능합니다.
    • 하지만, CSS의 width와 height 속성을 사용하는 것이 권장됩니다.
  4. 자동 줄바꿈 설정 가능 (wrap 속성)

    입력 시 줄이 넘칠 경우 자동 줄바꿈 처리 방식 지정이 가능합니다.

  5. HTML 태그를 그대로 입력할 수 있음

    <textarea>는 일반 텍스트 입력 필드이므로, 입력된 HTML 태그가 브라우저에서 해석되지 않고 그대로 표시됩니다.

CSS 기본 값

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

기본 문법

속성

<textarea> 속성 요약

  • 속성명
  • 설명

  • name

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

  • rows

    표시할 줄 수 (세로 크기)

  • cols

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

  • placeholder

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

  • maxlength

    입력 가능한 최대 문자 수

  • minlength

    입력해야 하는 최소 문자 수

  • readonly

    읽기 전용 필드로 설정

  • disabled

    입력 비활성화

  • required

    반드시 입력해야 제출 가능

  • wrap

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

  • autofocus

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

  • form

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

  • spellcheck

    맞춤법 검사 활성화 여부

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

예제

기본 텍스트 영역

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[rows], [cols] 속성을 활용한 크기 조정

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

크기 조정 제한 (resize: none)

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

최소/최대 글자 입력 제한

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

글자 수 카운팅

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

실시간 상담 채팅

아래는 대부분의 채팅 UI에서 사용되는 <textarea> 예제입니다.
기본적으로 한 줄로 시작하여, 줄 바꿈 시 <textarea>의 높이가 증가합니다. 일정 높이에 도달하면 더 이상 높이가 증가하지 않고, 내부에서 작성된 텍스트가 스크롤됩니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

주의사항

  • <textarea> 내부에 <b>굵게</b> 같은 HTML 태그를 입력해도 브라우저에서 해석되지 않고 그대로 표시됩니다.
  • 줄 수(rows)와 열 수(cols)는 픽셀이 아니라 문자 기준으로 설정되므로, 브라우저마다 표시되는 영역에 차이가 발생할 수 있습니다.
    따라서 <textarea>의 크기를 설정할 때는 CSS의 width와 height 속성을 사용하는 것이 더 유연하고 일관된 결과를 제공합니다.