datalist

提供: ASCII.jp HTMLリファレンス

ver.未対応~ ver.7~ ver.未対応~ ver.未対応~ ver.11.5~
意味 入力候補値のリスト
読み方 データリスト

カテゴリー

フロー・コンテンツ
フレージング・コンテンツ

親にできる要素/カテゴリー

フレージング・コンテンツが期待される個所

子にできる要素/カテゴリー

フレージング・コンテンツまたは0個以上のoptionoptgroup要素

<datalist 属性="値">~</datalist>

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 datalist要素は、他のコントロールのために、入力値の候補を事前に用意するのに使います。候補値はoption要素で定義します。

 執筆時点では、Firefox 7とOpera 11.5がdatalist要素に対応しています。

 datalist要素自体は、その子要素も含めて、何も表示しません。ただし、datalist要素内のoption要素の内容としてテキストを入れると、Internet Explorer 8/9ではそのテキストが表示されてしまいます。option要素にテキストを入れずに、label属性を使うことをお勧めします。

サンプル

(body要素の内部のみ掲載)

<form action="server.php" method="post">
<datalist id="taglist">
<option value="a" label="a">
<option value="abbr" label="abbr">
<option value="address" label="address">
</datalist>
<p><label>タグ:<input type="text" name="tag" list="taglist"></label></p>
<p><input type="submit" value="送信"></p>
</form>

サンプル実行画像

 Internet Explorer 9での表示例です。datalist要素に対応していないので、入力候補は表示されません。

 Opera 11.5の表示例です。入力欄をクリックすると、入力候補値が一覧表示されます。

Powered by Web Professional

目次