<datalist> 是 HTML 原生的標籤，目的是用來建立一組資料清單，並與 <input> 輸入欄位做結合，到瀏覽器端顯示時，使用者只要點擊輸入欄位即會跳出下拉選單，可以在開發者定義好的資料清單中做選擇，且在欄位內輸入與資料清單有關之文字，還能有自動補字或自動完成之效果，舉例來說，在做國家、縣市、地區等輸入時就可以用到。
使用方式
1. 先建立 <input>，並在標籤內塞入 list 屬性並做命名。
2. 下方建立 <datalist>，塞入與前者 list 屬性同名之 id 屬性名稱。
3. 在 <datalist> 至 </datalist> 中塞入 <option>，當中可以用 value 屬性塞入資料值，<option> 至 </option> 中間可以加入補充文字，例如選項之英文翻譯等，這是可選的。
範例原始碼
<label>所在地（Location）：</label>
<input list="area" name="MyArea" type="text" />
<datalist id="area">
<option value="基隆市">Keelung City</option>
<option value="新北市">New Taipei City</option>
<option value="台北市">Taipei City</option>
<option value="桃園市">Taoyuan City</option>
<option value="新竹縣">Hsinchu County</option>
<option value="新竹市">Hsinchu City</option>
<option value="苗栗縣">Miaoli County</option>
<option value="台中市">Taichung City</option>
<option value="彰化縣">Changhua County</option>
<option value="南投縣">Nantou County</option>
<option value="雲林縣">Yunlin County</option>
<option value="嘉義縣">Chiayi County</option>
<option value="嘉義市">Chiayi City</option>
<option value="台南市">Tainan City</option>
<option value="高雄市">Kaohsiung City</option>
<option value="屏東縣">Pingtung County</option>
<option value="宜蘭縣">Yilan County</option>
<option value="花蓮縣">Hualien County</option>
<option value="台東縣">Taitung County</option>
<option value="澎湖縣">Penghu County</option>
<option value="金門縣">Kinmen County</option>
<option value="連江縣">Lienchiang County</option>
</datalist>輸出預覽
範例 CodePen
See the Pen
HTML <datalist> 輸入欄位可自動補字之下拉選單 by Feng, Cheng-Chi (@qwe987299)
on CodePen.
▲ 精選圖片／原始碼與預覽截圖。
贊助廣告 ‧ Sponsor advertisements
《上一篇》Visual Studio、Git：建立本機存放庫並推送至 GitHub 
《下一篇》Ubuntu：建立新使用者並給予 sudo 權限、關閉 root 之 SSH 連線 
留言區 / Comments
萌芽論壇