datalist要素：HTML Living Standard各要素別メモ

概要

カテゴリー

• Flow content
• Phrasing content

配置できる場所

• 上記カテゴリーの要素が置ける場所。

内容モデル

• 下記のいずれか。
  • Phrasing content。未対応ブラウザでは全部表示される。対応ブラウザでは非表示となり、子孫に含まれるoption要素のみが選択肢として機能する。
  • 0個以上のoption要素。0個以上のScript-supporting contentの混在も可。

属性

• グローバル属性

HTML構文におけるタグの省略

• 省略不可。

WAI-ARIA

• デフォルトroleは、listbox。デフォルトroleをrole属性値に指定することは、推奨されない。
• デフォルトrole以外のroleは、指定不可。
• すべてのaria-*属性は指定不可。

視覚系ブラウザのデフォルトとして期待されるCSS

  datalist {display: none;}
  

注記：未対応ブラウザでは、上記のデフォルトは設定されてないので、普通に表示されることになる。

制約検証

• datalist要素の子孫は、制約検証の対象から除外。

意味・用法

他の入力コントロールのためにあらかじめ定義された選択肢を表すoption要素のセットを表す。

datalist要素のid属性値をinput要素などのlist属性値に指定することで、関連付けを行う。

その子とともに、非表示にされるべきである。

アクセシビリティ関連

• 未対応ユーザーエージェント向け代替コンテンツ：当該要素の内容としてoption要素を子孫に含むPhrasing contentを配置すれば、代替コンテンツとなる（対応ブラウザでは非表示となり、子孫に含まれるoption要素のみが選択肢として機能する）。

私見・補足

子孫のoption要素によって、input要素などにサジェストリストを提供する。

検索フォームのサジェスト機能が典型例。

表示確認

ソース１

  <label>datalist例1<input type="text" list="formex" placeholder="datalistサンプル" /></label>
  <datalist id="formex">
    <option>datalistのoptionその１</option>
    <option>datalistのoptionその２</option>
  </datalist>
  

表示結果１

datalist例1

ソース２

  <label>datalist例2<input type="text" list="formex2" placeholder="datalistサンプル" /></label>
  <datalist id="formex2">
    <label>代替コンテンツのselect要素→
    <select>
      <option selected="selected">datalistのoptionその３</option>
      <option>datalistのoptionその４</option>
    </select>
    </label>
  </datalist>
  

表示結果２

datalist例2

ソース３

  <label>datalist例3<input type="text" list="formex3" placeholder="datalistサンプル" /></label>
  <datalist id="formex3">
    <option label="その５" value="datalistのoptionその５"></option>
    <option label="その６" value="datalistのoptionその６"></option>
  </datalist>
  

表示結果３

datalist例3

ソース４：input要素のtype属性値=rangeの場合

  <label>datalist例4<input type="range" list="formex4" max="1000" min="0" step="10" /></label>
  <datalist id="formex4">
    <option label="0" value="0"></option>
    <option label="100" value="100"></option>
    <option label="500" value="500"></option>
    <option label="1000" value="1000"></option>
  </datalist>
  

表示結果４

datalist例4

対応ブラウザでは、スライダー式入力コントロールの該当数値の場所に目盛が付いて、そこで止められる。

ソース５：input要素のtype属性値=colorの場合

  <label>datalist例5<input type="color" list="formex5" /></label>
  <datalist id="formex5">
    <option label="白" value="#ffffff"></option>
    <option label="赤" value="#ff0000"></option>
    <option label="青" value="#0000ff"></option>
    <option label="黄" value="#ffff00"></option>
    <option label="黒" value="#000000"></option>
  </datalist>
  

表示結果５

datalist例5

対応ブラウザでは、当該色を直接選択できるユーザーインターフェースが表示される。