..

Search

<datalist>

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>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

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

연관 페이지

HTML Input 요소 수업 ⇒


연습문제