Thanks to visit codestin.com
Credit goes to developer.mozilla.org

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

<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>

결과

명세

Specification
HTML
# the-datalist-element

브라우저 호환성

폴리필

datalist-polyfill을 추가해 구형 브라우저에서 <datalist> 지원을 추가하세요.

같이 보기