HTML <datalist>: 추천 값 목록 요소

ALATTA

HTML <datalist>: 추천 값 목록 요소

HTML <datalist> 요소는 입력 컨트롤에서 사용자에게 제안할 값의 목록을 나타냅니다. 각각의 값은 <option> 요소로 표현합니다.

<label for="choice">맛을 고르세요.</label>
<input id="choice" list="flavors" name="choice">

<datalist id="flavors">
  <option>딸기</option>
  <option>바나나</option>
  <option>초코</option>
  <option>민트</option>
</datalist>

불러오는 중...

특성

전역 특성만 포함합니다.

예제

색 견본

<input type="color"> 요소에 <datalist>를 제공하면 사용자가 색을 선택할 때 견본에서 선택할 수 있습니다.

<datalist id="list">
  <option>#ff0000</option>
  <option>#ee0000</option>
  <option>#dd0000</option>
  <option>#cc0000</option>
  <option>#bb0000</option>
</datalist>

<input type="color" list="list">

불러오는 중...

날짜와 시간

<input>의 month, week, date, time, datetime-local 유형에 <datalist>를 제공하면 사용자가 간편하게 시간 또는 날짜를 선택할 수 있습니다.

날짜
<datalist id="date">
  <option value="1988-09-17">서울</option>
  <option value="1992-07-25">바르셀로나</option>
  <option value="1996-07-19">애틀랜타</option>
</datalist>

<datalist id="time">
  <option value="08:00">빠르게</option>
  <option value="09:00">평균</option>
  <option value="10:00">여유롭게</option>
</datalist>

<div>
  <label for="date-input">역대 올림픽 개최일을 입력하세요:</label>
  <input id="date-input" type="date" list="date">
</div>
<br>
<div>
  <label for="time-input">출근 시간을 입력하세요:</label>
  <input id="time-input" type="time" list="time">
</div>

불러오는 중...

슬라이더

<input>의 range 유형에 <datalist>를 제공하면 슬라이더가 선택지에 스냅됩니다.

<datalist id="list">
  <option>0</option>
  <option>2</option>
  <option>4</option>
  <option>8</option>
  <option>16</option>
  <option>32</option>
  <option>64</option>
</datalist>

<input type="range" list="list">

불러오는 중...

명세

HTML Standard

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
datalist

같이 보기