HTML datalist, 드롭다운 메뉴를 만드는 또 다른 방법 (select와 차이점)

<datalist> 태그란?

select 태그와 유사하게 드롭다운 목록을 만드는 태그입니다. 하지만, 몇 가지 부분에서 select 태그와 차이점이 있어요. 일단 사용법과 예시를 보면서 차이점을 알아볼께요.

 

[HTML] - HTML 드롭다운 목록을 생성하는 태그 select, option

 

사용법

<form>
  <label for="city">Ideal city to visit?</label>
  <input type="text" list="cities" id="city" name="city">
  <datalist id="cities">
    <option value="New York City"></option>
    <option value="Tokyo"></option>
    <option value="Barcelona"></option>
    <option value="Mexico City"></option>
    <option value="Melbourne"></option>
    <option value="Other"></option>  
  </datalist>
</form>

• 먼저 <form> 태그를 엽니다
• <label> 태그를 사용해서 질문을 만들구요
• <input> 태그를 넣습니다. (select와는 다른 부분입니다)
• <datalist> 태그를 만듭니다. 이 때 id 속성은 input의 list 속성과 같은 이름을 사용해야 하구요.
• 선택사항을 <option>태그로 만듭니다. <option> 태그의 value는 선택지를 구분할 수 있는 임의의 이름입니다

 

실행화면

 

See the Pen datalist by 40's Programmer (@40sProgrammer) on CodePen.

 

이제 차이점을 살펴볼께요.

1. select 태그는 정해진 목록에서 선택만 할 수 있지만, datalist는 자동완성 기능을 제공하며 사용자에게 새로운 항목을 입력받을 수 있습니다.
2. 뒤에 따라오는 option 태그도 조금 다릅니다. select는 option 태그에 value를 입력하고 사용자가 볼 수 있는 text를 같이 입력해야하지만, datalist는 value 값만 입력해도 됩니다.
3. select는 multiple 속성을 활용해서 여러 개의 항목을 선택할 수 있지만, datalist는 하나만 선택할 수 있어요.