<datalist> 태그의 정의 및 사용법

<datalist> 태그는
웹 양식 관련 컨트롤에서 사용할 수 있는 미리 정의된 옵션 데이터 목록을 나타냅니다

웹 양식 관련 컨트롤이란
사용자가 데이터를 입력하거나 선택하는 작업을 할 수 있는 요소를 의미합니다.
여러 가지 요소가 있지만, <datalist> 태그와 함께 사용되는 웹 양식 관련 컨트롤은 <input> 요소만 해당됩니다.

이 옵션 데이터 목록(data list)은 사용자가 쉽게 옵션을 선택하거나 데이터를 입력할 수 있도록 권장하는 선택지를 제공하는 용도로 사용되며,
목록의 항목들은 <option> 태그로 나타냅니다.

예제

<datalist> 태그가 웹 양식 관련 컨트롤에서 어떻게 사용되는지, 옵션 데이터 목록을 어떻게 나타내는지 예제를 통해 살펴보겠습니다.

예: <input type="color">와 <datalist>

다음의 예제에서는 입력 양식 컨트롤인 <input type="color">에 사용자가 쉽게 색상 값을 선택할 수 있도록,
<datalist>가 미리 정의된 색상 목록을 제공하는 용도로 사용되었습니다.

HTML 
<label for="colors">색상 선택:</label>
<input type="color" list="red-colors" id="colors">
<datalist id="red-colors">
    <!-- 목록의 항목은 <option> 태그로 정의됩니다. -->
    <option value="#ff0000"></option> <!-- 빨강 -->
    <option value="#0000ff"></option> <!-- 파랑 -->
    <option value="#ffff00"></option> <!-- 노랑 -->
</datalist>
실제 적용된 모습 색상 선택기를 클릭해 보세요.

위 예제에서 사용자가 색상 선택기(color picker)를 활성화하면, 지정된 미리 정의된 색상 목록이 표시됩니다. 사용자는 목록에서 색상을 선택하거나 직접 색상 값을 입력할 수 있습니다.

<datalist> 태그와 웹 양식 관련 컨트롤 연결하기

웹 양식 관련 컨트롤에서 사용할 수 있는 미리 정의된 옵션 데이터 목록을 나타내는 <datalist> 태그는, 이 목록을 사용할 웹 양식 컨트롤과 연결하여야 합니다.

연결 방법

<datalist> 태그를 웹 양식 컨트롤과 연결하려면 <datalist> 태그에 고유한 id를 지정한 다음,
해당 입력 필드(<input>, <select>)에 list 속성을 추가하고 이 id 값으로 사용합니다. 다음의 코드 예제로 살펴보겠습니다.

HTML 
<label for="colors">색상 선택:</label>
<input type="color" list="red-colors" id="colors"> <!-- list 속성을 추가 -->
<datalist id="red-colors"> <!-- 고유한 id를 지정 -->
    <option value="#ff0000"></option>
    <option value="#0000ff"></option>
    <option value="#ffff00"></option>
</datalist>
설명

이 예제는 <datalist>와 웹 양식 컨트롤인 <input type="color">를 연결하는 방법을 보여줍니다.

  • <datalist> 태그는 사용자가 쉽게 선택할 수 있도록 미리 정의된 색상 목록을 제공합니다.
  • <datalist> 태그와 연결한 웹 양식 콘트롤인 <input type="color">에 list 속성을 추가하고, 이 속성의 값으로 연결할 <datalist>의 id 값을 지정합니다.

<datalist> 태그 목록의 항목인 <option> 태그

<datalist> 태그는 0개 이상의 <option> 태그를 자식 요소로 포함하여, 사용자가 선택할 수 있는 미리 정의된 옵션 목록을 구성합니다.

각 <option> 태그는 <datalist> 태그 목록의 항목을 나타내며 value 속성으로 선택 가능한 값이 정의됩니다. 이 값은 사용자가 <datalist>에서 항목을 선택하거나 입력 필드에서 직접 값을 입력하면, 해당 값이 입력 필드에 반영됩니다. 다음의 코드 예제로 살펴보겠습니다.

HTML 
<label for="colors">색상 선택:</label>
<input type="color" list="red-colors" id="colors">
<datalist id="red-colors">
    <!-- <datalist> 태그 목록의 항목 -->
    <option value="#ff0000"></option>
    <option value="#0000ff"></option>
    <option value="#ffff00"></option>
</datalist>

설명

<datalist>에 포함된 각 <option> 태그는 <datalist> 태그는 사용자가 선택할 수 있는 색상 값을 나타냅니다. 예를 들어, #ff0000, #0000ff, #ffff00 색상 값을 제시합니다.

다음의 실제 적용된 모습에서 사용자가 색상 선택기(color picker)를 활성화하면, <option> 태그의 value로 미리 지정한 색상 목록을 볼 수 있습니다.

실제 적용된 모습 색상 선택기를 클릭해 보세요.

이 방식은 사용자가 색상 목록을 손쉽게 선택하거나, 직접 색상 코드를 입력할 수 있는 기능을 제공합니다.

속성

<datalist> 태그는 모든 글로벌 속성을 사용할 수 있습니다. 하지만, <datalist>만을 위한 관련 속성은 없습니다.

기술적인 문법 요약

datalist 태그의 구문 형식
허용되는 콘텐츠 0개 이상의 <option> 태그
암시적인 role 속성 값 listbox
허용된 role 속성 값 없음

더 많은 예제

다음의 예제들은 더 많은 웹 양식 관련 컨트롤의 유형에 따른 <datalist>의 사용을 상황별로 보여줍니다.

텍스트 유형의 컨트롤

<input> 태그의 type 속성 값이 text, search, url, tel, email, number와 같은 텍스트 유형의 컨트롤은 사용자가 컨트롤을 클릭하거나 두 번 클릭하면 해당하는 권장 값이 드롭다운 메뉴에 표시됩니다. 예를 들어, 크롬 브라우저의 경우 컨트롤의 오른쪽에는 미리 정의된 값이 있음을 가리키는 화살표(▼)도 함께 표시됩니다..

예: <input type="text">와 <datalist>

HTML 
<label for="fruits">과일 선물</label>
<input type="text" list="fruit-options" id="fruits">

<!-- 드롭다운 메뉴에 표시 -->
<datalist id="fruit-options">
    <option value="사과"></option>
    <option value="바나나"></option>
    <option value="체리"></option>
    <option value="대추야자"></option>
</datalist>
실제 적용된 모습 텍스트 박스를 클릭해 보세요.

범위 유형의 컨트롤

<input> 태그의 type 속성 값이 range는 사용자가 설정된 숫자 범위 내에서 값을 선택할 수 있도록 일반적으로 슬라이더 형태의 컨트롤로 제공되는 입력 필드를 나타냅니다.

범위 유형의 컨트롤과 함께 사용되는 <datalist>는 사용자가 쉽게 선택할 수 있는 눈금을 표시합니다.

예: <input type="range">와 <datalist>

HTML 
<label for="volume">볼륨</label>
<input type="range"
    id="volume"
    min="0"
    max="100"
    step="25"
    value="50"
    list="markers">

<!-- 눈금 표시 -->
<datalist id="markers">
    <option value="0"></option>
    <option value="25"></option>
    <option value="50"></option>
    <option value="75"></option>
    <option value="100"></option>
</datalist>
실제 적용된 모습

<datalist>와 <select> 태그

<datalist>와 <select> 태그는 비슷한 목적을 가진 태그이지만, 사용 방식과 지원하는 기능이 다릅니다.

<datalist>는 <select> 태그의 대체물이 아닙니다.
<datalist>는 입력 필드에 제안된 값들의 목록을 제공할 뿐이며, 해당 입력 필드는 여전히 유효성 검사를 통과하는 어떤 값도 허용할 수 있습니다. 사용자는 제안된 목록에서 선택할 수도 있고, 목록에 없는 값을 입력할 수도 있습니다.

즉, <datalist>는 <select> 태그와 달리 제안된 값들의 목록을 표시하는 역할만 하며, 이 목록에 없는 값도 입력 필드에 허용됩니다.

예시 코드

HTML 
<!-- <datalist> 예시 -->
<label for="animal-datalist">동물 선택(자유 입력 가능):</label>
<input id="animal-datalist" list="animals"> <!-- list 속성을 통해 datalist와 연결 -->
<datalist id="animals">
    <option value="고양이">
    <option value="강아지">
    <option value="토끼">
</datalist>
<hr>
<!-- <select> 예시 -->
<label for="animal-select">동물 선택(목록에서만 선택):</label>
<select id="animal-select">
    <option value="고양이">고양이</option>
    <option value="강아지">강아지</option>
    <option value="토끼">토끼</option>
</select>
실제 적용된 모습
<datalist>

사용자가 컨트롤을 클릭하거나 두 번 클릭하면 권장 값이 드롭다운 메뉴에 표시됩니다. 사용자는 표시된 권장 값을 선택하거나, 선택하지 않고 직접 입력할 수도 있습니다.

<select>

사용자가 반드시 목록에서 하나를 선택하도록 강제하므로, 외부 값을 입력할 수 없습니다.

브라우저 호환성

마지막 업데이트 정보: 2024-11-11

datalist 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<datalist> 20 12 110 12.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

  • Firefox 110(Released 2023-02-14) 이전에는 대부분의 웹 양식 관련 컨트롤을 지원하지 않았습니다.
  • Firefox 110(Released 2023-02-14)부터는 부분적으로만 지원합니다.
    <input> 태그의 type 속성 값이 date, time은 지원하지 않습니다.

명세서

datalist 태그의 명세서 사양
명세서 사양
<datalist> HTML Standard
#the-datalist-element

참고문헌

같이 보기