datalist は <option> と組み合わせて入力項目の選択肢を定義します。input要素の label属性と、datalist要素の id属性で両者を結び付けます。<input type="text"> は入力のみ、<select> は選択のみ可能なのに対して、datalist付き inputは、入力と選択の両方を利用することが可能です。
Internet Explorer 10、Chrome 20、Firefox 4.0、Opera 9.5 でサポートされています。
下記の例では、入力欄に文字を入力、または選択リストから選択することを可能としています。
<label>
好きなスポーツは？
<input name="fav_sports" list="sports_list">
<datalist id="sports_list">
<option value="サッカー">
<option value="野球">
<option value="ゴルフ">
</datalist>
</label>
下記の例では、datalist 要素に未対応のブラウザを考慮し、未対応の場合はテキスト入力欄と選択蘭の両方を表示しています。
<div>
好きなスポーツは？
<input 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>