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">
불러오는 중...
명세
브라우저 호환성
| 데스크톱 | 모바일 | ||||||
|---|---|---|---|---|---|---|---|
| iOS | Android | ||||||
| Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
datalist | |||||||