HTML <datalist>: 추천 값 목록 요소
HTML <datalist> 요소는 입력 컨트롤에서 사용자에게 제안할 값의 목록을 나타냅니다. 각각의 값은 <option> 요소로 표현합니다.
<label for="choice">맛을 고르세요.</label>
<input id="choice" list="flavors" name="choice">
<datalist id="flavors">
<option value="딸기"></option>
<option value="바나나">국산 바나나</option>
<option value="초코"></option>
<option value="민트"></option>
</datalist>
불러오는 중...
<datalist>를 입력 칸과 연결하려면 우선 <datalist>에 고유한 id를 부여해야 합니다. 그리고 <input> 요소의 list 특성에 id와 같은 값을 지정하면 됩니다. <input>의 일부 유형만 list 특성을 지원하므로 사용 전에 확인이 필요합니다.
각각의 <option>에는 value 특성이 필요합니다. 사용자가 추천 값을 선택 시 입력되는 값은 value 특성의 값입니다. <option> 요소의 내용이나 label 특성은 (Firefox) value 대신 보여지거나, (Chrome, Safari) value와 함께 보여지며 부연 설명으로 사용됩니다.
<datalist>는 <select>의 대체재가 아닙니다. <datalist> 스스로는 입력 칸을 나타내지 않으며 사용자가 선택할 수 있는 추천 값의 목록일 뿐입니다. 또한 연결된 <input> 요소에서도 <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 | |||||||