---
# System prepended metadata

title: How to input and select into one visible input field
tags: [Html]

---

---
tags: Html
---

# How to input and select into one visible input field

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

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

來看看以下範例
```htmlmixed=
<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>
```
成果展示
![](https://i.imgur.com/ZjfKOSx.gif)
