개념

• 미리 정의된 옵션들을 제안해 주는 자동완성 드롭다운 기능을 제공한다.

특징

• HTML5에서 추가된 태그
• select 태그와 달리 목록 외의 값도 자유롭게 입력할 수 있다. (옵션에 없는 값도 입력할 수 있다.)
• input의 list 속성과 datalist의 id 값이 일치해야 한다.
• option 태그를 안에 넣어서 제안 목록을 만든다.
• 대부분의 input에서 활용할 수 있다.
• CSS로 직접 스타일할 수 없다.

실무

• 검색 박스에 자동완성 기능을 제공할 때 활용한다.
• 옵션 값이 상대적으로 적거나, 매우 자주 쓰는 값을 미리 보여주고 싶을 때 적합하다.

예시

<label for="car">차량 모델:</label>
<input type="text" list="car-model" id="car" name="car">

<datalist id="car-model">
  <option value="Avante">
  <option value="Sonata">
  <option value="Tesla">
  <option value="Volvo">
</datalist>