# HTML 17. datalist and textarea

### 下拉式選單的另外一種設計方式:

      <label for="">地區:</label>
      <input list="areaList" name="area" id="area" type="text" />
      <datalist id="areaList">
        <option value="基隆">基隆市</option>
        <option value="台北">台北市</option>
        <option value="新北">新北市</option>
      </datalist>

### 標籤 datalist

- 這是一個沒辦法自動透過 emmet 展開的 tag 需要自行輸入:

裡面在帶入 `option` *3 , value 寫入: **基隆、台北、新北**

記住: value 是唯一可以被帶入到後端資料庫的**值**。

- 建立 input type ="text" , id 為 `areaList`
- `<datalist> </datalist>` - 記得也寫入一個 id 為 `areaList`

總之就是 input 去搭配 datalist

---

### textarea 留言區塊設計:

- `textarea` -

      <label for="suggestion">給網站一個建議</label>
      <br />
      <textarea
        name="suggestion"
        id="suggestion"
        cols="100" // 可調整留言區塊的長寬 
        rows="10" // 可調整留言區塊的長寬
      ></textarea>

- // suggestion - 建議(英;單字)

###### tags: `2022 網頁開發全攻略教程`