HTML5 Datalist 태그 사용법

1. Datalist 태그란?

Datalist 태그는 HTML 문서에서 `input` 요소에 대한 미리 정의된 옵션 목록을 제공하는 데 사용되는 태그입니다. 사용자가 입력 필드에 텍스트를 입력할 때 자동완성 기능을 제공하며, 드롭다운 목록에서 선택할 수 있는 옵션을 제시합니다.

2. 기본 구조

Datalist 태그의 기본 사용법

<div class="form-group">
    <label for="browser">브라우저 선택</label>
    <input list="browsers" id="browser" name="browser">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
        <option value="Edge">
        <option value="Opera">
    </datalist>
</div>

<div class="form-group">
    <label for="country">국가 검색</label>
    <input list="countries" id="country" name="country">
    <datalist id="countries">
        <option value="대한민국">
        <option value="일본">
        <option value="중국">
        <option value="미국">
        <option value="영국">
    </datalist>
</div>

3. 자주 사용되는 속성

속성 설명 예시
id datalist의 고유 식별자 <datalist id="browsers">
list input 요소와 연결할 datalist의 id <input list="browsers">

4. 실제 사용 예제

<form class="search-form">
    <div class="form-group">
        <label for="search" class="required">검색어</label>
        <input type="search" id="search" name="search" list="search-suggestions" required>
        <datalist id="search-suggestions">
            <option value="HTML5">
            <option value="CSS3">
            <option value="JavaScript">
            <option value="React">
            <option value="Vue.js">
            <option value="Node.js">
            <option value="Python">
            <option value="Java">
        </datalist>
    </div>

    <div class="form-group">
        <label for="email">이메일 도메인</label>
        <input type="email" id="email" name="email" list="email-domains">
        <datalist id="email-domains">
            <option value="@gmail.com">
            <option value="@naver.com">
            <option value="@daum.net">
            <option value="@hanmail.net">
            <option value="@outlook.com">
        </datalist>
    </div>

    <div class="form-group">
        <label for="product">제품 검색</label>
        <input type="text" id="product" name="product" list="products">
        <datalist id="products">
            <option value="노트북">
            <option value="스마트폰">
            <option value="태블릿">
            <option value="스마트워치">
            <option value="이어폰">
        </datalist>
    </div>
</form>

💡 주의사항

5. 스타일링 예제

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

    /* 레이블 스타일 */
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #333;
    }

    label.required::after {
        content: " *";
        color: #dc3545;
    }

    /* 입력 필드 기본 스타일 */
    input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        background-color: #fff;
    }

    /* 검색 입력 필드 스타일 */
    input[type="search"] {
        padding-left: 30px;
        background-image: url('search-icon.png');
        background-repeat: no-repeat;
        background-position: 8px center;
        background-size: 16px;
    }

    /* 이메일 입력 필드 스타일 */
    input[type="email"] {
        padding-right: 30px;
        background-image: url('email-icon.png');
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 16px;
    }

    /* 호버 및 포커스 스타일 */
    input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
    }

    /* 비활성화 스타일 */
    input:disabled {
        background-color: #e9ecef;
        cursor: not-allowed;
        opacity: 0.65;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        input {
            font-size: 16px; /* iOS에서 확대 방지 */
        }
    }
</style>

6. 성능 최적화 팁

7. 검증 및 테스트

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