[HTML] 드롭 다운 목록 태그 - <select> & 데이터리스트 태그 - <datalist>

<select> 태그

- 드롭 다운 목록 생성

- 목록을 스크롤하여 하나의 옵션을 선택할 수 있도록 함

 

 

 

<option> 태그

- 목록에 들어갈 요소 추가

<select>
  <option>목록1</option>
  <option>목록2</option>
  <option>목록3</option>
</select>

<label for="cake">What type of cake would you like?</label>
  <select id="cake" name="cake">
    <option value="choco">Choco</option>
    <option value="cheese">Cheese</option>
    <option value="mango">Mango</option>
  </select>

 

 

 

<datalist> 태그

- 데이터리스트 생성

- 전체 목록을 띄워 하나의 옵션을 선택할 수 있도록 함

- 일치하는 목록이 없더라도 사용자가 새로운 목록 입력할 수 있음

<datalist>
  <option value="목록1"></option>
  <option value="목록2"></option>
  <option value="목록3"></option>
</datalist>

<label for="sauce">What type of sauce would you like?</label>
  <input type="text" list="sauces" id="sauce" name="sauce">
  <label for="sauce-selection"></label>
  <datalist id="sauces">
    <option value="ketchup"></option>
    <option value="mayo"></option>
    <option value="salt"></option>
  </datalist>