datalist element - by. UXKM

요약 설명

<datalist> 요소는 <input> 요소와 함께 사용되어 자동완성 가능한 선택 목록을 제공하는 시맨틱 태그로, 사용자가 입력하는 값에 대해 미리 정의된 제안 옵션을 보여줄 수 있도록 도와줍니다.
<input> 요소의 list 속성과 연결된 <datalist>는 내부에 여러 개의 <option> 요소를 포함하며, 사용자가 입력할 때 자동완성 목록을 제공합니다.
사용자는 직접 값을 입력하거나 목록에서 선택할 수 있으며, <select>와 달리 제한 없이 자유 입력도 가능하다는 점이 특징입니다. 반복되는 입력을 줄이고, 사용자 편의성과 입력 정확도를 향상시키는 데 유용합니다.

주요 역할 및 특징

  1. 자동완성 기능 제공

    <datalist>는 <input>과 연결되어 사용자가 입력 시 미리 정의된 옵션을 자동으로 제안할 수 있도록 합니다.

  2. 사용자가 목록 외의 값도 입력 가능

    <select>와 달리 사용자가 목록에 없는 값을 직접 입력할 수 있습니다.

  3. <option> 요소와 함께 사용
    • <datalist> 내부에는 <option> 요소를 사용하여 자동 완성 목록을 정의합니다.
    • <option>의 value 속성이 사용자의 입력값과 비교되어 자동 완성이 작동합니다.
  4. 드롭다운이지만 <select>와 다름
    • <select>는 사용자가 정해진 옵션만 선택 가능하지만, <datalist>는 제안된 목록 외에도 자유롭게 입력 가능합니다.
    • 예를 들어, <select>는 "사과", "바나나" 중에서만 선택할 수 있지만, <datalist>는 "포도"처럼 목록에 없는 값도 입력할 수 있습니다.
  5. 검색 입력창 등과 함께 사용 가능

    검색 필드에서 추천 검색어 제공 등의 용도로 사용할 수 있습니다.

  6. CSS 스타일링 제한

    <datalist> 자체는 CSS로 직접 스타일링할 수 없으며, 연결된 <input> 요소의 스타일을 변경해야 합니다.

CSS 기본 값

<datalist> 자체는 브라우저에서 기본적으로 표시되지 않으며, 내부의 <option> 요소가 자동 완성 목록을 제공하는 역할을 합니다.
<option> 요소의 스타일은 대부분 브라우저 기본 스타일을 따릅니다.

기본 문법

<datalist> 요소는 반드시 <input> 요소와 함께 사용해야 하며, <input> 요소의 list 속성의 값을 <datalist> 요소의 id 값과 동일하게 지정해야 합니다.

또한, <datalist> 내부의 <option> 요소는 값(value)만을 제공하는 용도로 사용되기 때문에, <option> 요소 내에 텍스트가 없다면 태그를 닫지 않아도 됩니다.

<password> 타입을 제외하고 placeholder 속성을 사용할 수 있는 대부분의 <input> 타입과 <datalist>를 함께 사용할 수 있습니다.

<datalist>요소와 연계하여 사용할 수 있는 <input>의 type :
<input type="text"> : 일반 텍스트 입력
<input type="search"> : 검색창
<input type="tel"> : 전화번호 입력
<input type="email"> : 이메일 입력
<input type="url"> : URL 입력
<input type="number"> : 숫자 입력
<input type="range"> : 슬라이더 입력
<input type="date"> : 날짜 선택
<input type="month"> : 월 선택
<input type="week"> : 주 선택
<input type="time"> : 시간 선택
<input type="datetime-local"> : 로컬 날짜 및 시간 선택
<input type="color"> : 색상 선택 (브라우저에따라다를수있음)

<input type="password">는 보안상 <datalist>를 통한 자동완성을 지원하지 않지만, 브라우저의 비밀번호 저장 기능을 통해 자동 완성될 수 있습니다.

속성

<datalist> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.
위 [기본 문법] 섹션에서 설명한 <datalist> 요소의 id 속성은 HTML의 글로벌 속성으로, <datalist>뿐만 아니라 모든 HTML 요소에서 사용할 수 있습니다.

예제

기본적인 자동완성 목록

일반 텍스트, 검색창, 전화번호 자동완성

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

이메일 자동완성

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

숫자 자동완성 / 슬라이더 눈금 표시

<input type="range">와 <datalist>을 함께 사용하면, 옵션 목록이 나타나는 것이 아니라 슬라이더(bar) 아래에 눈금(tick marks)으로 표시됩니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

날짜 및 시간 선택 자동 완성

사용자가 달력 또는 시간 아이콘을 클릭하면, <datalist>의 <option>으로 설정한 값을 우선 선택할 수 있는 UI가 표시됩니다.
단, 사용자가 다른 날짜(월, 주, 시간 등)를 선택하면 해당 입력 필드의 기본 UI가 나타나며 자유롭게 선택할 수 있습니다."

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

색상 선택 자동 완성

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

주의사항

  • <datalist>는 <select>와 다르게 강제 선택이 아닙니다.
    사용자는 <datalist>의 제안된 옵션을 선택하지 않고 임의의 값을 입력할 수도 있습니다.
  • CSS를 사용해 <datalist> 내부의 <option>을 직접 스타일링할 수 없습니다.
  • 모든 최신 브라우저에서 <datalist>가 지원되지만, 구형 브라우저에서는 동작하지 않을 수 있습니다.
  • <datalist>는 <select>와 달리 multiple 속성을 사용할 수 없기 때문에 여러 개의 값을 동시에 선택할 수 없습니다.
  • 일부 모바일 브라우저(특히 iOS의 Safari)에서는 <datalist>의 자동 완성 기능이 제한될 수 있습니다.