<datalist>
~</datalist>
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> </select> </datalist> </div>