仕様

DATALIST要素は、
他のコントロールの定義済み
option要素のセットを
表します。

datalistデータリスト (data list)
カテゴリ
  • フレージングコンテンツ
  • フローコンテンツ
種類通常要素
この要素を
使用できる
状態		フレージングコンテンツを受け入れる要素。
許可されて
いる内容		フレージングコンテンツ。
または、0個以上の option要素, およびスクリプトをサポートする要素。
属性グローバル属性のみ
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		なし
[既定値 : listbox]
DOM
インター
フェイス
HTMLDataListElement
  1. [Exposed=Window]
  2. interface HTMLMeterElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [SameObject] readonly attribute HTMLCollection options;
  6. };
レンダリング
非表示の要素
  1. datalist {
  2. display: none;
  3. }

CSS を大雑把に読むと、 要素とその子孫は、ボックスやテキストランを生成しません。 などになります。

参加
コンテキスト		なし
確立
コンテキスト		なし
datalist要素は、option要素のセットを表します。

datalist要素は、他のコントロールの定義済み option要素のセットを表します。

  1. <form action="./fmreceive.htm">
  2. <input name="nipText" list="idaDl01">
  3. <button name="nbtSender" value="./fmdatalist.htm">ボタン</button>
  4. <br>受信用の<br>ページへ
  5. </form>
  6. <span><datalist id="idaDl01">
  7. <option value="LI01"></option>
  8. <option value="LI02"></option>
  9. </datalist></span>

受信用の
ページへ
参照元
  1. HTML Living Standard. 4.10.8 The datalist element
  2. HTML Living Standard. 15 Rendering 15.3.1 Hidden elements
  3. HTML 5.2 W3C 勧告. 4.10.8 The datalist element
  4. MDN Web Docs. HTML <datalist>:
  5. GitHub - mfranzke/datalist-polyfill: Minimal and dependency-free vanilla JavaScript polyfill for the awesome datalist-functionality

使用可能な箇所

フレージングコンテンツを
受け入れる要素に
配置できます。

datalist要素は、フレージングコンテンツを受け入れる要素に配置できます。
フレージングコンテンツは、フローコンテンツのタイプの１つです。フローコンテンツを受け入れる要素でも配置できます。

  1. <input name="nipText" list="idaDL2">
  2. <pre>
  3. <datalist id="idaDL2">
  4. <option value="DL01"></option>
  5. <option value="DL02"></option>
  6. </datalist>
  7. </pre>

フレージングコンテンツを配置できる pre要素のコンテンツの一部として、datalist要素を配置できます。

配置できるコンテンツ

option要素,
フレージングコンテンツを
配置できます。

datalist要素は、フレージングコンテンツを配置できます。または、0個以上の option要素, およびスクリプトをサポートする要素を配置できます。

  1. <input name="nipText" list="idaDL3">
  2. <datalist id="idaDL3">
  3. <option value="DL01"></option>
  4. <option value="DL02"></option>
  5. </datalist>

datalist要素のコンテンツの一部として option要素を配置できます。

id属性

  1. <input name="nipText" list="idaDL4">
  2. <datalist id="idaDL4">
  3. <option value="DL01"></option>
  4. <option value="DL02"></option>
  5. </datalist>

id属性は、要素の一意の識別子（ID）を指定するグローバル属性です。
HTML要素で指定する場合、id属性値は要素のツリー内のすべてのIDの中で一意である必要があり、少なくとも1つの文字が含まれている必要があります。 値には、ASCII空白を含めないでください。 IDの形式には他の制限はありません。特に、IDは数字のみで構成することも、数字で開始することも、アンダースコアで開始することも、句読点のみで構成することもできます。
要素の一意の識別子は、さまざまな目的に使用できます。特に、フラグメントを使用してドキュメントの特定の部分にリンクする方法として、スクリプトで要素をターゲットにする方法として、 およびCSSから特定の要素のスタイルを設定する方法として使用できます。
input要素が list属性に datalist要素の id属性の値(datalist要素の一意の識別子) を指定して関連付けします。

気を付ける点

関連付け

datalist要素は、レンダリングでは何も表さず、その子とともに、非表示になります。 datalist要素は、input要素の list属性を使用して input要素にフックされます。

部分一致

datalist要素は、input要素に関連付けされますが、そのリストの内容は input要素の入力値の部分一致した物が表示されます。常に全件をリスト表示したい場合などに不向きです。