datalist

<datalist> 요소는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담습니다. 단독으로 사용되는 요소는 아니며 input의 list라는 속성과 함께 사용이 됩니다.

  <form action="" method="get">

    <label for="movie">좋아하는 영화: </label>
    <input type="text" id="movie" name="movie" list="movie-list"> //list속성으로 id값을 가져옴

    <datalist id="movie-list">  //id값 명시
      <option>쥬토피아</option>
      <option>인사이드아웃</option>
      <option>토이스토리1</option>
      <option>토이스토리2</option>
      <option>토이스토리3</option>
    </datalist>

    <input type="submit">
  </form>

좋아하는 영화: //id값 명시 쥬토피아 인사이드아웃 토이스토리1 토이스토리2 토이스토리3

select태그와의 차이점

select태그와 datalist태그 모두 드롭다운 메뉴라는 점에서는 같습니다. 하지만 select메뉴는 한번 선택한 값을 수정할 수 없지만 datalist는 수정도 가능하며 선택지 외 추가적으로 데이터를 입력할 수 있습니다.

좋아하는 영화: 쥬토피아 인사이드아웃 토이스토리1 토이스토리2 토이스토리3 좋아하는 영화: 쥬토피아 인사이드아웃 토이스토리1 토이스토리2 토이스토리3

또한 입력한 값에 해당하는 제한 리스트가 정리되어 출력되게 됩니다.

만약 설정한 데이터의 값을 수정하지 않고 사용을 한다면 select를 이용하고 어떤 값을 추천하고 수정해도 괜찮다면 datalist를 사용하면 좋습니다.