💡 퀵 접속: htm.kr/form

HTML5 Form 태그 사용법

1. Form 태그란?

Form 태그는 HTML 문서에서 사용자로부터 데이터를 입력받는 데 사용되는 태그입니다. 이 태그는 웹 페이지에서 사용자와 상호작용하는 다양한 입력 요소들을 포함할 수 있으며, 입력된 데이터를 서버로 전송하는 기능을 제공합니다.

2. 기본 구조

Form 태그의 기본 사용법

<form action="/submit" method="post">
    <div class="form-group">
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username" required>
    </div>
    
    <div class="form-group">
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <button type="submit">제출</button>
</form>

3. 자주 사용되는 속성

속성	설명	예시
action	폼 데이터를 전송할 URL	<form action="/submit">
method	HTTP 메서드 (get/post)	<form method="post">
enctype	데이터 인코딩 방식	<form enctype="multipart/form-data">
novalidate	유효성 검사 비활성화	<form novalidate>
autocomplete	자동 완성 설정	<form autocomplete="off">
target	응답 표시 위치	<form target="_blank">

4. 실제 사용 예제

<form 
    action="/contact" 
    method="post" 
    class="contact-form" 
    novalidate>
    
    <div class="form-group">
        <label for="name">이름</label>
        <input 
            type="text" 
            id="name" 
            name="name" 
            required 
            minlength="2" 
            maxlength="50" 
            pattern="[가-힣a-zA-Z\s]+">
        <span class="error-message">이름을 입력해주세요.</span>
    </div>
    
    <div class="form-group">
        <label for="email">이메일</label>
        <input 
            type="email" 
            id="email" 
            name="email" 
            required 
            placeholder="example@domain.com">
        <span class="error-message">유효한 이메일 주소를 입력해주세요.</span>
    </div>
    
    <div class="form-group">
        <label for="message">메시지</label>
        <textarea 
            id="message" 
            name="message" 
            required 
            minlength="10" 
            maxlength="1000" 
            rows="5"></textarea>
        <span class="error-message">메시지를 입력해주세요.</span>
    </div>
    
    <div class="form-group">
        <label>문의 유형</label>
        <select name="inquiry_type" required>
            <option value="">선택해주세요</option>
            <option value="general">일반 문의</option>
            <option value="technical">기술 지원</option>
            <option value="billing">결제 문의</option>
        </select>
    </div>
    
    <div class="form-group">
        <label class="checkbox-label">
            <input type="checkbox" name="agreement" required>
            개인정보 수집 및 이용에 동의합니다.
        </label>
    </div>
    
    <div class="form-buttons">
        <button type="submit" class="submit-btn">보내기</button>
        <button type="reset" class="reset-btn">초기화</button>
    </div>
</form>

💡 주의사항

모든 입력 필드에 적절한 label을 연결합니다.
필수 입력 필드는 required 속성을 사용합니다.
입력값의 유효성을 검사합니다.
보안을 위해 적절한 인코딩 방식을 사용합니다.
접근성을 고려한 마크업을 작성합니다.

5. 스타일링 예제

<style>
    /* 폼 컨테이너 스타일 */
    .contact-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;
    }

    /* 입력 필드 스타일 */
    input[type="text"],
    input[type="email"],
    textarea,
    select {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
    }

    /* 에러 메시지 스타일 */
    .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) {
        .contact-form {
            padding: 15px;
        }
        
        .form-buttons {
            flex-direction: column;
        }
        
        .submit-btn,
        .reset-btn {
            width: 100%;
        }
    }
</style>

6. 성능 최적화 팁

필요한 입력 필드만 사용합니다.
적절한 입력 타입을 사용합니다.
클라이언트 측 유효성 검사를 구현합니다.
폼 제출 시 적절한 피드백을 제공합니다.
폼 데이터를 효율적으로 처리합니다.

7. 검증 및 테스트

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

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