HTML textarea 태그: 여러 줄 입력·초기값·크기와 길이 제한

HTML Reference

작성일 2024-09-07 최근 수정일 2026-10-30

HTML의 textarea는 여러 줄의 일반 텍스트를 입력받는 요소입니다. 초기 내용은 여는 태그와 닫는 태그 사이에 적고, rows·cols로 표시 크기를, minlength·maxlength로 입력 길이를 조절합니다. 폼으로 값을 보내려면 name도 지정해야 합니다.

크기·초기값·입력 제한의 차이

textarea에는 닫는 태그가 필요합니다. input과 달리 HTML의 value 속성으로 초기값을 지정하지 않습니다. 태그 사이에 쓴 줄바꿈과 공백이 내용에 반영되므로, 코드 정렬을 위해 넣은 들여쓰기가 원하지 않는 입력값이 되지 않게 확인하세요.

속성	역할과 주의점
`rows`, `cols`	보이는 줄 수와 평균 문자 폭 기준의 너비를 정합니다. 양의 정수를 사용하며, 입력 가능한 줄 수·문자 수의 상한은 아닙니다. CSS 너비·높이 설정의 영향도 받습니다.
`placeholder`	입력값이 비었을 때 표시하는 힌트입니다. 실제 값으로 전송되지 않으며, 입력하면 사라지므로 별도의 `label`을 대신하지 못합니다.
`required`	값이 비어 있으면 일반적인 폼 제출을 막습니다. 공백만 쓴 값까지 의미 있는 내용으로 판별해 주지는 않습니다.
`minlength`, `maxlength`	사용자가 입력하는 값의 최소·최대 길이를 제한합니다. 길이 단위는 UTF-16 코드 단위이며, 이모지 한 개가 두 단위 이상일 수 있습니다. 최소 길이만 지정해도 빈 값은 허용되므로 필수 입력에는 `required`를 함께 씁니다.
`readonly`	사용자가 수정할 수 없지만 포커스를 받고 복사할 수 있습니다. 이름이 있으면 폼 데이터에 포함됩니다.
`disabled`	컨트롤을 비활성화합니다. 폼 데이터와 제약 조건 검증에서 제외됩니다.

직접 실행하는 여러 줄 입력 예제

다음 전체 코드를 textarea.html로 저장한 뒤 브라우저에서 여세요. 서버나 별도 라이브러리는 필요하지 않습니다. 제출 버튼은 실제 전송 대신 브라우저가 만드는 이름·값 목록을 보여 줍니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>textarea 입력과 전송 값</title>
  <style>
    body { font-family: sans-serif; margin: 24px; }
    label, textarea { display: block; }
    textarea { max-width: 100%; box-sizing: border-box; margin: 8px 0 20px; resize: vertical; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>문의 내용 작성</h1>
  <form id="demo">
    <label for="message">문의 내용 (5~200 코드 단위)</label>
    <textarea id="message" name="message" rows="4" cols="32"
      minlength="5" maxlength="200" required
      placeholder="문제 상황과 원하는 결과를 적어 주세요.">첫 번째 줄입니다.
두 번째 줄입니다.</textarea>
    <label for="reference">읽기 전용 안내</label>
    <textarea id="reference" name="reference" rows="2" readonly>주문 번호를 함께 적어 주세요.</textarea>
    <label for="locked">비활성 항목</label>
    <textarea id="locked" name="locked" rows="2" disabled>이 값은 전송에서 제외됩니다.</textarea>
    <button type="submit">전송 값 확인</button>
    <button type="reset">초기화</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

처음 상태에서 전송 값 확인을 누르면 message와 reference 두 항목이 나옵니다. JSON 표시의 \n은 값에 줄바꿈이 있다는 뜻이며, locked는 빠집니다.
문의 내용을 모두 지우고 제출하면 필수 입력 검증이 제출을 막습니다. 이어서 일반 문자 두세 글자만 직접 입력하고 제출해 최소 길이 검사도 확인하세요.
문의 내용에 <b>연습</b>을 입력해 제출하세요. 텍스트 입력과 출력이므로 굵은 글씨가 아닌 태그 모양의 문자열이 표시됩니다.
초기화를 누르면 문의 내용이 원래의 두 줄로 돌아오고 결과가 지워집니다. 초기화는 빈 값으로 만들기가 아니라 HTML에 정한 기본값으로 복귀하는 동작입니다.

브라우저의 기본 유효성 검사는 사용자 입력과 일반적인 폼 제출을 도와주는 기능입니다. 스크립트로 값을 대입하는 경우까지 같은 검사가 보장되는 것은 아니므로, 실제 서비스에서는 서버에서도 필수 값·허용 길이·입력 형식을 검사해야 합니다.

자동 줄바꿈과 실제 줄바꿈 구분하기

입력창 너비 때문에 화면에서 줄이 바뀌는 것과 사용자가 Enter로 줄바꿈을 넣는 것은 다릅니다. 기본값인 wrap="soft"에서는 화면상 자동 줄바꿈을 이유로 전송 값에 추가 줄바꿈을 넣지 않습니다. wrap="hard"는 지정한 열 너비를 기준으로 전송 값에 줄바꿈을 추가하며 cols가 필요합니다. 단순히 좁은 화면에 맞추려는 목적이라면 기본 줄바꿈과 CSS 너비 조절을 우선 사용하세요.

예제의 max-width: 100%는 좁은 화면에서 입력창이 부모 너비를 넘는 것을 줄이고, resize: vertical은 사용자가 높이를 조절하도록 합니다. 폰트·글자 폭·브라우저에 따라 cols="32"의 실제 픽셀 너비가 달라지므로 정확히 32글자가 한 줄에 들어간다고 가정하면 안 됩니다.

JavaScript와 서버에서 값을 다룰 때

JavaScript에서 현재 입력은 textarea.value, 기본값은 textarea.defaultValue로 읽습니다. 사용자가 수정한 현재 값을 읽으려면 태그 내부의 textContent 대신 value를 사용하세요. 예제의 결과 영역은 사용자 입력을 HTML로 실행하지 않도록 textContent에 출력합니다.

readonly와 disabled는 보안 장치가 아닙니다. 사용자는 개발자 도구나 별도 요청으로 값을 바꿀 수 있으므로, 수정하면 안 되는 주문 번호·권한 정보 등은 서버의 신뢰할 수 있는 데이터로 다시 확인해야 합니다. 서버의 길이 계산이 바이트 수나 다른 문자 단위를 사용한다면 브라우저의 maxlength와 같은 기준인지도 점검하세요.

세부 속성과 제약 조건은 MDN textarea 요소 문서에서 확인할 수 있습니다.

HTML Reference