<datalist>要素

Technical Summary

Definition / Categories

項目	定義
意味	他のcontrolに対する、事前定義されたoptionの集合
Categories	Flow content、Phrasing content
Context	Phrasing contentが期待される場所
Content model	Phrasing content、またはoptionとscript-supporting elementsの0個以上
Tag omission	開始タグ・終了タグとも省略不可
DOM interface	HTMLDataListElement。読み取り専用のoptionsがHTMLCollectionを返す

Inputとの関連付け

datalistは、inputのlist属性からID参照されることで候補のsourceになります。関連付けられた要素は、入力値を保持・送信するinputであり、datalistがフォーム送信のcontrolになるわけではありません。

<label for="browser">ブラウザー</label>
<input id="browser" name="browser" list="browser-options">

<datalist id="browser-options">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

この関係はHTMLのID参照であり、inputの子にdatalistを書けばよいという関係ではありません。複数の候補sourceを暗黙に結合する仕組みでもありません。

この例の候補UIはuser agentが描画します。候補の開閉、絞り込み、表示ラベル、キーボード操作をページ側の固定されたUI契約として扱うことはできません。

Suggestionとなるoption

datalistの子孫であるoptionのうち、disabledではなく、値が空文字列でないものがsuggestionを表します。候補の値はoptionのvalueから解決され、候補にはvalueとlabelが関係します。

条件	意味	確認点
datalistの子孫	その候補sourceのoptionである	他のselectのoption listとは分けて読む
disabledでない	suggestionの候補になり得る	disabledは候補から除外する条件であり、inputの全入力を無効にするものではない
valueが空でない	値を持つsuggestionである	空のoptionを候補の区切りやplaceholderとして使わない
labelの有無	補助的なラベル情報に関係する	表示方法はuser agentに依存するため、重要情報をlabelだけに置かない

<datalist id="countries">
  <option value="Japan" label="日本"></option>
  <option value="United States" label="アメリカ合衆国"></option>
  <option value=""></option> <!-- suggestionではない -->
  <option value="Legacy" disabled></option> <!-- suggestionではない -->
</datalist>

Form submissionとconstraint validation

候補を選ぶと、選ばれた値は関連付けられたinputのvalueになります。datalistは固定された選択集合を提供するものではないため、候補外の文字列を入力できることと、候補の選択がselectのselectednessになることを混同してはいけません。

required、pattern、minlengthなどの制約が必要なら、対象となるinputへ指定します。候補を表示したことだけで、候補外の値がconstraint validationで拒否されるわけではありません。

<label for="ticket">チケット番号</label>
<input id="ticket" name="ticket" list="tickets"
       pattern="T-[0-9]{4}" required>
<datalist id="tickets">
  <option value="T-1024"></option>
  <option value="T-2048"></option>
</datalist>

Content modelとfallback

単純な形ではdatalistの中にoptionを直接置きます。仕様は、datalistを実装しないuser agent向けに、内部へfallback contentを置く形も定義しています。fallbackを採用する場合は、旧環境で表示する内容と、現行環境で候補として認識されるoptionの関係を別途検証します。

<datalist id="animals">
  <label>または一覧から選択:
    <select name="animal">
      <option value="Cat">Cat</option>
      <option value="Dog">Dog</option>
    </select>
  </label>
</datalist>

fallbackのselectは独自のフォームcontrolです。実際に採用する場合は、現行user agentでの非表示境界、旧user agentでの送信、ラベルの重複を確認してください。

DOM Interface

HTMLDataListElementは、候補のoptionを収集する読み取り専用のoptionsを公開します。入力側では、対応するinput.listから解決されたdatalistを確認できます。

const input = document.querySelector('#browser');
const list = document.querySelector('#browser-options');

input.list === list;       // 関連付けられたdatalist
list.options.length;       // optionの数
list.options[0].value;     // 最初の候補のvalue

API	概要
HTMLDataListElement.options	datalistをrootとし、optionに一致するHTMLCollectionを返す
HTMLInputElement.list	list属性から解決されたHTMLDataListElement、またはnull
HTMLOptionElement.value	候補として扱われる値。空文字列ならsuggestionの条件を満たさない
HTMLOptionElement.disabled	option自身のdisabled属性。suggestionの候補条件ではdisabled optionを除外する

Fact / Evidence（主張 / 根拠）

仕様上の定義、候補の条件、フォームとの境界、DOM APIを主張・条件・状態・根拠位置に分けて記録します。ブラウザーの候補UIとアクセシビリティツリーは、下のImplementation Evidenceに分離しています。

Evidence

1. HTML Standard: The datalist element — categories、content model、suggestion、rendering、fallback、DOM interface
2. HTML Standard: The list attribute — inputとsuggestions sourceの関連付け
3. HTML Standard: The option element — optionのvalue、label、disabled、datalist内での位置付け
4. HTML Accessibility API Mappings — list属性を持つinputとsuggestions sourceのアクセシビリティAPI境界
5. Web Platform Tests: HTML forms — datalist、input、optionに関係するテスト群を特定する入口

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装・WPT・アクセシビリティ観測を記録します。今回のページでは、datalist専用の新規実測をまだ完了していないため、部分観測と未実施を分けて表示します。

既存fixtureの部分観測: fixture ID forms-core-v1には、input[list]とdatalist内のoptionが含まれます。既存記録では、Chrome 152.0.0.0 / Windows 10 / 2026-09-15に、datalist内optionのlabel・value・text・form owner、およびdatalist付きinputのidle AX tree上の公開状態を確認しています。候補popupの展開、HTMLDataListElement.options、入力型ごとの候補UIはこのページの専用確認範囲として未完了です。

候補popupの表示、labelの見え方、入力typeごとの対応、AX treeの公開はuser agent・OS・状態に依存し得ます。単一環境の部分観測を、ブラウザー間で共通する実装結果として登録しません。

Coverage / Open Issues

• 確認済み意味、Categories、Context、Content model、tag omission、DOM interface
• 確認済みlist属性とidの関連付け、suggestionのdisabled・空value条件、inputとdatalistのフォーム境界
• 確認済み候補を固定選択や検証ルールと混同しないこと、fallback contentの仕様上の位置付け
• 未完了Chrome以外を含む候補popupの開閉、絞り込み、label表示、キーボード操作、入力typeごとの差異
• 未完了HTMLDataListElement.options、動的option更新、候補選択後のvalue、FormDataの専用fixture実測
• 未完了WPTの個別テスト実行、HTML-AAMの候補展開状態、支援技術別の観測、fallbackの旧環境比較

このページは初期Coverageです。仕様上の範囲を整理したものであり、すべてのブラウザーで同じ候補表示・操作・アクセシビリティAPI結果になること、また候補外入力が自動的に検証で拒否されることを主張しません。

Related surface

初心者向けの入力候補、自由入力との違い、list属性の使い方はYugienのdatalist要素ページを参照してください。入力type・フォーム検証はAtlasのinput要素、候補optionのvalue・labelはAtlasのoption要素、選択肢から必ず選ばせるモデルはAtlasのselect要素でも確認できます。