💡 퀵 접속: htm.kr/input

HTML5 Input 태그 사용법

1. Input 태그란?

Input 태그는 HTML 문서에서 사용자로부터 다양한 형태의 데이터를 입력받는 데 사용되는 태그입니다. 이 태그는 type 속성을 통해 텍스트, 비밀번호, 체크박스, 라디오 버튼, 파일 업로드 등 다양한 입력 방식을 제공합니다.

2. 기본 구조

Input 태그의 기본 사용법

<div class="form-group">
    <label for="username">사용자 이름:</label>
    <input type="text" id="username" name="username" required>
</div>

<div class="form-group">
    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password" required>
</div>

<div class="form-group">
    <label>관심 분야:</label>
    <input type="checkbox" id="web" name="interests" value="web">
    <label for="web">웹 개발</label>
    
    <input type="checkbox" id="mobile" name="interests" value="mobile">
    <label for="mobile">모바일 개발</label>
</div>

3. 자주 사용되는 속성

속성	설명	예시
type	입력 필드 유형	<input type="text">
name	입력 필드 이름	<input name="username">
id	입력 필드 식별자	<input id="email">
value	기본값	<input value="기본값">
placeholder	입력 힌트	<input placeholder="이메일 입력">
required	필수 입력	<input required>

4. 실제 사용 예제

<form class="user-form">
    <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]+"
            placeholder="홍길동">
        <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="phone">전화번호</label>
        <input 
            type="tel" 
            id="phone" 
            name="phone" 
            pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
            placeholder="010-0000-0000">
        <span class="error-message">올바른 전화번호 형식이 아닙니다.</span>
    </div>
    
    <div class="form-group">
        <label for="birthdate">생년월일</label>
        <input 
            type="date" 
            id="birthdate" 
            name="birthdate" 
            min="1900-01-01" 
            max="2024-12-31">
    </div>
    
    <div class="form-group">
        <label for="profile-image">프로필 이미지</label>
        <input 
            type="file" 
            id="profile-image" 
            name="profile-image" 
            accept="image/*">
    </div>
    
    <div class="form-group">
        <label>관심 분야</label>
        <div class="checkbox-group">
            <label class="checkbox-label">
                <input type="checkbox" name="interests" value="web">
                웹 개발
            </label>
            <label class="checkbox-label">
                <input type="checkbox" name="interests" value="mobile">
                모바일 개발
            </label>
            <label class="checkbox-label">
                <input type="checkbox" name="interests" value="ai">
                인공지능
            </label>
        </div>
    </div>
    
    <div class="form-group">
        <label>경력</label>
        <div class="radio-group">
            <label class="radio-label">
                <input type="radio" name="experience" value="junior">
                주니어 (1-3년)
            </label>
            <label class="radio-label">
                <input type="radio" name="experience" value="mid">
                미드레벨 (4-7년)
            </label>
            <label class="radio-label">
                <input type="radio" name="experience" value="senior">
                시니어 (8년 이상)
            </label>
        </div>
    </div>
    
    <div class="form-buttons">
        <button type="submit" class="submit-btn">제출</button>
        <button type="reset" class="reset-btn">초기화</button>
    </div>
</form>

💡 주의사항

모든 입력 필드에 적절한 label을 연결합니다.
필수 입력 필드는 required 속성을 사용합니다.
입력값의 유효성을 검사합니다.
적절한 input type을 사용합니다.
접근성을 고려한 마크업을 작성합니다.

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;
    }

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

    /* 체크박스와 라디오 버튼 그룹 스타일 */
    .checkbox-group,
    .radio-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .checkbox-label,
    .radio-label {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

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

6. 성능 최적화 팁

필요한 입력 필드만 사용합니다.
적절한 입력 타입을 사용합니다.
클라이언트 측 유효성 검사를 구현합니다.
입력 필드에 적절한 제한을 설정합니다.
자동 완성 기능을 적절히 활용합니다.

7. 검증 및 테스트

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

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