予測変換（サジェスト機能）

datalist要素は、input要素にサジェスト機能を追加する（入力候補の選択肢を与える）要素

datalistに挿入するoptionが選択肢となり、inputパーツと関連付けはdatalistの「id属性」と、inputの「list属性」で紐づける

<label>
  好きなスポーツは？
  <input type="text" name="fav_sports" list="sports_list">
  <datalist id="sports_list">
    <option value="サッカー">
    <option value="野球">
    <option value="ゴルフ">
  </datalist>
</label>

 
上記では未対応ブラウザ(iOS・サファリ系)ではうまく表示されないので、selectを入れて対策する

<div>
  好きなスポーツは？
  <input type="text" name="fav_sports" list="sports_list">
  <datalist id="sports_list">
    もしくはリストから選択
    <select name="fav_sports">
      <option>(未選択)</option>
      <option>サッカー</option>
      <option>野球</option>
      <option>ゴルフ</option>
    </select>
  </datalist>
</div>