<datalist></datalist>

ブラウザ
  • IE
  • Cr
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 0個以上のoption要素 / フレージング・コンテンツ / HTML 5.1では更にスクリプトサポート要素

datalist要素は、入力候補のリストを作成します。入力候補の選択肢は、この要素内に配置するoption要素で示すことになります。


<datalist id="example">
<option value="選択肢1"></option>
<option value="選択肢2"></option>
<option value="選択肢3"></option>
</datalist>
属性 値
グローバル属性
id="" 要素のID名 文字列 固有の識別名

入力候補の設定方法

入力候補のリストは、他の入力欄に組み込む形で使用することになります。

具体的な設定方法は次のようになります。

  1. datalist要素で入力候補のリストを作成します。
  2. そのdatalist要素にID名を指定します。
  3. 対象となる入力欄（input要素）にlist属性を指定して、その値にdatalist要素に指定したID名を記述します。

このID名によって、入力候補のリストと入力欄が関連付けられることになります。

<input type="text" name="name" list="example">

<datalist id="example">
<option value="サンプル1"></option>
<option value="サンプル2"></option>
<option value="サンプル3"></option>
</datalist>

選択肢の作り方

入力候補の選択肢は、datalist要素内に配置するoption要素で作成します。

基本的には、次のようにvalue属性を使って指定することをお勧めします。（未対応のブラウザで選択肢が表示されないようにするため）

<datalist id="example">
<option value="サンプル1"></option>
<option value="サンプル2"></option>
<option value="サンプル3"></option>
</datalist>

datalist要素の内容について

datalist要素の内容には、option要素の他にフレージング・コンテンツも含めることができます。

このフレージング・コンテンツは、datalist要素に対応していないブラウザ向けの代替コンテンツとして使用されます。（datalist要素に対応しているブラウザでは、このコンテンツは表示されません）

<datalist id="example">
<option value="サンプル1"></option>
<option value="サンプル2"></option>
<option value="サンプル3"></option>

代替コンテンツを配置できます。

</datalist>

対象となるフォーム部品

datalist要素は、以下のフォーム部品と関連付けることができます。

使用例

2つの入力欄と関連付けた例

<form method="post" action="example.cgi">

<p>商品コード1：<input type="text" name="code1" size="30" list="codeType"></p>
<p>商品コード2：<input type="text" name="code2" size="30" list="codeType"></p>

<p><input type="submit" value="送信する"></p>

</form>

<datalist id="codeType">
<option value="AAA-"></option>
<option value="BBB-"></option>
<option value="CCC-"></option>
</datalist>
表示例

商品コード1：

商品コード2：

  • 上記のように、datalist要素はform要素の外に配置することもできます。（中にも配置できます）
  • 入力候補に対応しているブラウザでは、入力欄をクリック（またはダブルクリック）することでリストを表示することができます。
  • サンプルのため送信できません。
代替コンテンツを配置した例

<p>商品コード：<input type="text" name="code" size="30" list="codeType"></p>

<datalist id="codeType">
<option value="AAA-"></option>
<option value="BBB-"></option>
<option value="CCC-"></option>

※商品コードの欄には、AAA-、BBB-、CCC- などで始まる8桁のコードを記入してください。

</datalist>
表示例

商品コード：

※商品コードの欄には、AAA-、BBB-、CCC- などで始まる8桁のコードを記入してください。
  • 入力候補に対応しているブラウザでは、代替コンテンツは表示されません。
option要素にlabel属性を指定した例

<p>商品コード：<input type="text" name="code" size="30" list="codeType"></p>

<datalist id="codeType">
<option value="AAA-" label="商品タイプA"></option>
<option value="BBB-" label="商品タイプB"></option>
<option value="CCC-" label="商品タイプC"></option>
</datalist>
表示例

商品コード：

  • ブラウザにより、入力候補の表示内容が異なります。IE（11）とFirefox（50）がlabel属性のテキストだけを表示するのに対し、Chrome（55）とOpera（12）ではvalue属性の文字列も表示してしまいます。（いずれの場合も、value属性の値が入力欄に挿入されることになります）
  • label属性については、option要素のページを参考にしてください。