💡 퀵 접속: htm.kr/textarea

HTML5 Textarea 태그 사용법

1. Textarea 태그란?

Textarea 태그는 HTML 문서에서 여러 줄의 텍스트를 입력받는 데 사용되는 태그입니다. 사용자가 긴 텍스트나 여러 줄의 내용을 입력할 수 있게 해주며, 댓글, 메시지, 설명 등의 입력에 적합합니다.

2. 기본 구조

Textarea 태그의 기본 사용법

<div class="form-group">
    <label for="message">메시지:</label>
    <textarea 
        id="message" 
        name="message" 
        rows="4" 
        cols="50" 
        placeholder="메시지를 입력하세요...">
    </textarea>
</div>

<div class="form-group">
    <label for="description">상품 설명:</label>
    <textarea 
        id="description" 
        name="description" 
        rows="6" 
        cols="50" 
        maxlength="500" 
        required>
    </textarea>
    <small>최대 500자까지 입력 가능합니다.</small>
</div>

3. 자주 사용되는 속성

속성	설명	예시
name	텍스트 영역 이름	<textarea name="message">
id	텍스트 영역 식별자	<textarea id="message">
rows	표시할 행 수	<textarea rows="4">
cols	표시할 열 수	<textarea cols="50">
placeholder	입력 힌트	<textarea placeholder="내용을 입력하세요">
maxlength	최대 문자 수	<textarea maxlength="500">
required	필수 입력	<textarea required>
readonly	읽기 전용	<textarea readonly>
disabled	비활성화	<textarea disabled>

4. 실제 사용 예제

<form class="user-form">
    <div class="form-group">
        <label for="review">상품 리뷰</label>
        <textarea 
            id="review" 
            name="review" 
            rows="6" 
            cols="50" 
            maxlength="1000" 
            placeholder="상품에 대한 리뷰를 작성해주세요..."
            required>
        </textarea>
        <div class="char-count">
            <span id="current-count">0</span>/1000자
        </div>
        <span class="error-message">리뷰를 입력해주세요.</span>
    </div>
    
    <div class="form-group">
        <label for="shipping-address">배송지 주소</label>
        <textarea 
            id="shipping-address" 
            name="shipping-address" 
            rows="3" 
            cols="50" 
            placeholder="상세 주소를 입력해주세요..."
            required>
        </textarea>
    </div>
    
    <div class="form-group">
        <label for="memo">배송 시 요청사항</label>
        <textarea 
            id="memo" 
            name="memo" 
            rows="2" 
            cols="50" 
            placeholder="배송 시 요청사항이 있다면 입력해주세요...">
        </textarea>
    </div>
    
    <div class="form-buttons">
        <button type="submit" class="submit-btn">제출</button>
        <button type="reset" class="reset-btn">초기화</button>
    </div>
</form>

💡 주의사항

모든 텍스트 영역에 적절한 label을 연결합니다.
필수 입력 필드는 required 속성을 사용합니다.
적절한 크기(rows, cols)를 설정합니다.
최대 입력 길이를 제한합니다.
접근성을 고려한 마크업을 작성합니다.

5. 스타일링 예제

<style>
    /* 폼 컨테이너 스타일 */
    .user-form {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* 폼 그룹 스타일 */
    .form-group {
        margin-bottom: 20px;
    }

    /* 라벨 스타일 */
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
        color: #333;
    }

    /* 텍스트 영역 스타일 */
    textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        line-height: 1.5;
        resize: vertical;
        min-height: 100px;
    }

    textarea:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }

    /* 문자 수 카운터 스타일 */
    .char-count {
        text-align: right;
        color: #666;
        font-size: 14px;
        margin-top: 5px;
    }

    /* 에러 메시지 스타일 */
    .error-message {
        display: none;
        color: #dc3545;
        font-size: 14px;
        margin-top: 5px;
    }

    /* 버튼 스타일 */
    .form-buttons {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }

    .submit-btn,
    .reset-btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
    }

    .submit-btn {
        background-color: #007bff;
        color: #fff;
    }

    .reset-btn {
        background-color: #6c757d;
        color: #fff;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .user-form {
            padding: 15px;
        }
        
        textarea {
            font-size: 16px; /* 모바일에서 자동 확대 방지 */
        }
        
        .form-buttons {
            flex-direction: column;
        }
        
        .submit-btn,
        .reset-btn {
            width: 100%;
        }
    }
</style>

6. 성능 최적화 팁

필요한 크기만 설정합니다.
적절한 최대 길이를 제한합니다.
자동 리사이즈를 제어합니다.
입력값 유효성을 검사합니다.
접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

textarea 태그가 올바르게 사용되었는지 확인하는 방법:

W3C 마크업 검증 서비스 사용
다양한 브라우저에서 테스트
모바일 기기에서 테스트
접근성 검사 도구 사용
입력값 유효성 검사 테스트