<datalist> - データリスト

トップ > HTMLリファレンス > <datalist>

概要

形式
<datalist>~</datalist>
サポート
LS / H5 / e10 / Ch20 / Fx4 / Op9.5
カテゴリ
フローコンテンツ
フレージングコンテンツ
親要素
フレージングコンテンツ を子要素に持てるもの
子要素
フレージングコンテンツ、もしくは 0個以上の option要素 および スクリプトサポート要素
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性

説明

datalist は <option> と組み合わせて入力項目の選択肢を定義します。input要素の label属性と、datalist要素の id属性で両者を結び付けます。<input type="text"> は入力のみ、<select> は選択のみ可能なのに対して、datalist付き inputは、入力と選択の両方を利用することが可能です。

Internet Explorer 10、Chrome 20、Firefox 4.0、Opera 9.5 でサポートされています。

属性

グローバル属性
詳細は グローバル属性 を参照してください。

使用例

下記の例では、入力欄に文字を入力、または選択リストから選択することを可能としています。

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

下記の例では、datalist 要素に未対応のブラウザを考慮し、未対応の場合はテキスト入力欄と選択蘭の両方を表示しています。

HTML
<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>
表示(サポートブラウザの場合)
好きなスポーツは? もしくはリストから選択
表示(未サポートブラウザの場合)
好きなスポーツは? もしくはリストから選択

関連項目

<input><option>

リンク


Copyright (C) 2011-2017 杜甫々
初版:2011年6月4日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/datalist.htm