HTML <datalist> 태그
정의 및 특징
<datalist> 태그는 <input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용합니다.
<datalist> 요소는 사용자가 <input> 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트로 보여줌으로써 자동완성 기능을 제공합니다.
<input> 요소의 list 속성값으로 <datalist> 요소의 id 속성값을 명시하면, 해당 <datalist> 요소에서 미리 정의한 옵션들을 <input> 요소에서 사용할 수 있습니다.
예제
<form action="/examples/media/action_target.php" method="get">
학과 : <input type="text" name="st_department" list="depList"><br>
이름 : <input type="text" name="st_name"><br><br>
<datalist id="depList">
<option value="컴퓨터공학과"></option>
<option value="영어영문과"></option>
<option value="경영학과"></option>
<option value="사회체육과"></option>
</datalist>
<button type="submit">제출하기</button>
</form>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <datalist> | 20.0 | 지원함 | 10.0 | 4.0 | 지원하지 않음 | 9.5 |
HTML5에서 변경된 사항
<datalist> 태그는 HTML5에서 새롭게 추가된 요소입니다.
CSS 기본값
| datalist { display: none; } |
DOM 인터페이스
| interface HTMLDataListElement : HTMLElement { [SameObject] readonly attribute HTMLCollection options; }; |
