datalist 要素

4.10.8 datalist 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所
コンテントモデル:
フレージング・コンテント (0 個以上の option 要素を子孫に持つ)、または、
0 個以上の option 要素、のいずれか
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
listbox (デフォルト - 指定不要)
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLDataListElement : HTMLElement {
  readonly attribute HTMLCollection options;
};

datalist 要素は、他のコントロールに対して事前に用意した選択肢を表す option 要素のセットを表します。レンダリングにおいては、datalist 要素は何も表さず、その子とともに非表示にされるべきです。

datalist 要素は、2 つの方法で使われることができます。最も簡単なものとしては、datalist 要素が子に option 要素しか持たない場合です。

<label>
 性別:
 <input name=sex list=sexes>
 <datalist id=sexes>
  <option value="女性">
  <option value="男性">
 </datalist>
</label>

もう少し詳しく説明すると、datalist 要素には、datalist をサポートしていない低レベルのクライアント向けに表示するコンテンツを入れることができます。その場合は、option 要素は、datalist 要素の中の select 要素の中に入れます。

<label>
 性別:
 <input name=sex list=sexes>
</label>
<datalist id=sexes>
 <label>
  または、このリストから選んでください:
  <select name=sex>
   <option value="">
   <option>女性
   <option>男性
  </select>
 </label>
</datalist>

datalist 要素は、input 要素の list 属性を使って、input 要素と連結させます。

datalist 要素の子孫で、無効でなく、が空文字列でない文字列の option 要素は、 サジェストを表します。それぞれのサジェストは、ラベルを持ちます。

datalist . options

datalist 要素の options の要素の HTMLCollection を返します。

options IDL 属性は、datalist ノードをルートとした HTMLCollection を返さなければいけません。そのフィルターは、option 要素に一致します。

制約バリデーション: 要素が祖先に datalist 要素を持つなら、その要素は制約バリデーションから除外されます。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-datalist-element