[HTML] HTML으로 자동 옵션 만들기

🍀 자동 옵션이란?

---

사용자가 입력 필드에 텍스트를 입력할 때, 브라우저 또는 애플리케이션이 입력 내용을 기반으로 자동으로 추천 항목을 제공하는 기능을 의미함. 이 기능은 주로 사용자 경험을 향상시키고 입력 시간을 줄이는 데 사용함.

 

 

🍀 HTML으로 자동 옵션 만들기

---

* JS 없이 HTML만으로 자동 옵션을 만들 수 있다는 점 알고 계셨나요?? 프로젝트 할 때 간단하게 자동 옵션 기능 넣고 싶으면 HTML만으로 코드 작성해서 구현해도 너무 좋을 것 같습니다.

 

※ input의 list와 datalist의 id는 같아야 함.

  <label for="food"> 너의 최애 여돌은? </label>
  <input type="text" list="food-options" />
  <datalist id="food-options">
    <option value="카리나" />
    <option value="윈터" />
    <option value="장원영" />
    <option value="안유진" />
    <option value="장규리" />
    <option value="김채원" />
    <option value="김민주" />
    <option value="최예나" />
    <option value="이채연" />
    <option value="이영지" />
  </datalist>

 

 

🍀 HTML으로 자동 옵션 완성본

---

* 뜬금 없지만 저의 어린시절 최애는 소녀시대 태연이였답니다 🥰