<datalist>

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

HTML <datalist> 요소는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담습니다.

시도해 보기

<label for="ice-cream-choice">Choose a flavor:</label> <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" /> <datalist id="ice-cream-flavors"> <option value="Chocolate"></option> <option value="Coconut"></option> <option value="Mint"></option> <option value="Strawberry"></option> <option value="Vanilla"></option> </datalist>

label { display: block; margin-bottom: 10px; }

콘텐츠 카테고리	플로우 콘텐츠, 구문 콘텐츠.
가능한 콘텐츠	구문 콘텐츠, 또는 0개 이상의 `<option>` 요소.
태그 생략	불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소	구문 콘텐츠를 허용하는 모든 요소.
암시적 ARIA 역할	`listbox`
가능한 ARIA 역할	없음
DOM 인터페이스	`HTMLDataListElement`

특성

이 요소는 전역 특성만 포함합니다.

예제

html

<label for="myBrowser">아래 목록에서 브라우저를 선택하세요:</label> <input list="browsers" id="myBrowser" name="myBrowser" /> <datalist id="browsers"> <option value="Chrome"></option> <option value="Firefox"></option> <option value="Internet Explorer"></option> <option value="Opera"></option> <option value="Safari"></option> <option value="Microsoft Edge"></option> </datalist>