HTML <datalist> 태그
예시
사전 정의된 옵션이 있는 데이터 목록(<input> 요소에 연결됨):
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
정의 및 사용
태그 는 <datalist><input> 요소에 대해 미리 정의된 옵션 목록을 지정합니다.
태그는 < <datalist>input> 요소에 대한 "자동 완성" 기능을 제공하는 데 사용됩니다. 사용자는 데이터를 입력할 때 미리 정의된 옵션의 드롭다운 목록을 볼 수 있습니다.
요소 의 <datalist>id 속성은 <input> 요소의 목록 속성과 같아야 합니다(이렇게 하면 함께 바인딩됩니다).
브라우저 지원
표의 숫자는 요소를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Element | |||||
|---|---|---|---|---|---|
| <datalist> | 20.0 | 10.0 | 4.0 | 12.1 | 9.5 |
전역 속성
<datalist>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<datalist>태그는 HTML의 이벤트 속성 도 지원합니다 .
관련 페이지
HTML DOM 참조: 데이터 목록 개체
기본 CSS 설정
대부분의 브라우저는 <datalist>다음 기본값으로 요소를 표시합니다.
datalist {
display: none;
}