<datalist>
HTML <datalist> 요소는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담습니다.
시도해보기
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구문 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 구문 콘텐츠, 또는 0개 이상의 <option> 요소. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | listbox (en-US) |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | HTMLDataListElement (en-US) |
특성
이 요소는 전역 특성만 포함합니다.
예제
html
<label for="myBrowser">아래 목록에서 브라우저를 선택하세요:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
결과
명세
| Specification |
|---|
| HTML Standard # the-datalist-element |
브라우저 호환성
BCD tables only load in the browser
폴리필
datalist-polyfill을 추가해 구형 브라우저에서 <datalist> 지원을 추가하세요.