[HTML] <datalist>

<datalist>

<datalist> 태그는 선택 목록과 자동 완성 기능을 설정합니다.

사용자가 데이터를 입력하면 일치하는 목록이 있을 경우 보여줍니다. <select> 태그는 주어진 선택 목록을 선택만 할 수 있지만, <datalist> 태그는 선택 목록에 없어도, 사용자가 입력할 수 있습니다.

---

<datalist>

<datalist> 태그는 선택 목록과 자동 완성 기능을 설정합니다.

특징	설명
요소	인라인 요소(Inline Element)
닫는 태그	닫는 태그 사용(<datalist> ~ </datalist>)
버전	HTML5
시각적 표현	선택 메뉴 리스트
사용성

정의(Definition)

• <datalist> 태그는 태그는 선택 목록과 자동 완성 기능을 설정합니다.
• <datalist> 태그는 <input> 요소의 list 속성 값과 datalist의 id 값을 연결하여 사용합니다.
• <datalist> 태그는 사용자가 데이터를 입력하면 목록에서 일치하는 데이터를 찾아서 자동완성 기능을 제공합니다.
• <datalist> 태그는 선택 목록이 많을 경우에 사용자가 데이터를 쉽게 찾아서 선택할 수 있습니다.
• <datalist> 태그는 선택 목록에 없는 값도, 사용자의 입력 할 수 있습니다.
• <selecg> 태그와 <datalist> 태그는 선택 목록을 보여주는 것은 똑같지만, <datalist>는 사용자가 선택 목록에 없는 값도 사용할 수 있으면, 일치하는 데이터 값이 있으면 바로 선택할 수 있습니다.

비교(Compare)

• <select> 태그는 선택 목록을 설정합니다.
• <datalist> 태그는 선택 목록과 자동 완성 기능을 설정합니다.
• <details> 태그는 접기/펼치기 목록을 설정합니다.

예제1(Sample)

<datalist> 태그와 <input>을 이용한 선택 목록 예제입니다.

당신이 선호하는 언어는 무엇인가요?

HTML

CSS

SCRIPT

<label for="choice">당신이 선호하는 언어는 무엇인가요?</label>
<input list="language" id="choice" name="choice" />

<datalist id="language">
    <option value="html">
    <option value="css">
    <option value="react">
    <option value="vue">
    <option value="Javascript">
</datalist>

//CSS none

//Javascript none

예제2(Sample)

<select> 태그를 이용한 선택 목록 예제입니다.

당신이 선호하는 언어는 무엇인가요? HTML CSS React.js vue.js Javascript

HTML

CSS

SCRIPT

<label for="select">당신이 선호하는 언어는 무엇인가요?</label>
<select id="select">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="react">React.js</option>
    <option value="vue">vue.js</option>
    <option value="Javascript">Javascript</option>
</select>

//CSS none

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
<datalist>	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능

참고 사이트(Reference)

• MDN
• w3

---