---
tags: Html
---

# How to input and select into one visible input field

我們可以使用datalist: The HTML Data List element

可以讓他是select也可以變成input

來看看以下範例

<label for="fruit-choice">選擇你喜歡的水果</label>
<input list="fruit-items" id="fruit-choice" name="fruit-choice" />

<datalist id="fruit-items">
  <option value="蘋果"></option>
  <option value="鳳梨"></option>
  <option value="水蜜桃"></option>
  <option value="香蕉"></option>
  <option value="櫻桃"></option>
</datalist>

成果展示