目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、listboxデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外のroleは、指定不可。
視覚系ブラウザデフォルトとして期待されるCSS

  datalist {display: none;}
  
制約検証
  • datalist要素子孫は、制約検証の対象から除外。
意味・用法

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

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

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

アクセシビリティ関連

私見・補足

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

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

未対応ブラウザでは、機能せずに普通に表示されてしまうので、表示されると都合が悪い場合は、スタイルシートで非表示にしておくこと。

表示確認

ソース1

  <label>datalist例1<input type="text" list="formex" placeholder="datalistサンプル" /></label>
  <datalist id="formex">
    <option>datalistのoptionその1</option>
    <option>datalistのoptionその2</option>
  </datalist>
  
表示結果1

未対応ブラウザでは、option要素内容テキストがそのまま表示される。

IE6表示のスクリーンショット(表示結果1)
IE6表示:option要素の内容テキストが表示されてしまっている

IE7からIE9も同様。

ソース2

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

対応ブラウザではソース1と変化なし。未対応ブラウザでは、select要素による選択コントロールが表示される。

IE6表示のスクリーンショット(表示結果2)
IE6表示:代替コンテンツとしてselect要素が表示されている

IE7からIE9も同様。

ソース3

  <label>datalist例3<input type="text" list="formex3" placeholder="datalistサンプル" /></label>
  <datalist id="formex3">
    <option label="その5" value="datalistのoptionその5"></option>
    <option label="その6" value="datalistのoptionその6"></option>
  </datalist>
  
表示結果3

未対応ブラウザでは、代替コンテンツもなく、表示されない。

IE6表示のスクリーンショット(表示結果3)
IE6表示:datalist要素に関しては何も表示されてない

IE7からIE9も同様。

ソース4: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>
  
表示結果4

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

ソース5: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>
  
表示結果5

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