HTMLリファレンスマニュアル

HTMLタグ一覧

HTML: <datalist>タグ

HTMLの<datalist>要素は、<option>要素のセットを含んでおり、これらの要素は他のフォームコントロールの選択可能な値を表します；<datalist>タグはHTML5要素は、<input>タグの推奨値リストを定義するための要素です。これらの推奨値は、入力コントロールに表示され、ユーザーがデータを入力コントロールに入力する際に、利用可能なオプションがフィルタリングされます。このタグは、<datalist&

オンラインサンプル

以下は<input>要素の例です。<datalist>でその可能な値が説明されています：

サンプル

!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　datalistタグの使用（基本チュートリアルウェブ oldtoolbag.com)</title>
</head>
<body>
　<label　for="tutorial_choice">Tutorials:　</label>
　　<input　list="tutorial_types"　name="tutorial_choice"　id="tutorial_choice">
　　datalist　id="tutorial_types">
　　　　<option　value="HTML">
　　　　<option　value="CSS">
　　　　<option　value="SQL">
　　</datalist>
</body>
</html>

テストをしてみてください ‹/›

このHTML5ドキュメントの例では、<datalist>タグを使用して<input>タグに推奨値リストを作成しました。推奨されます3の値（HTML、CSS、SQL）が表示されるドロップダウンリストとして選択できます。

ブラウザの互換性

<datalist> タグは以下のブラウザで基本的なサポートされています：

IEFirefoxOperaChromeSafari

タグの定義及び使用説明

HTML <datalist> タグは <body> マークアップ内に位置しており、通常 <form> マークアップ内に位置します。

<datalist> タグは <option> タグを含んでおり、これらのタグは関連する <input> タグに可能な値を提供します。

<datalist> タグは <input> 要素の可能なオプションリストを定義します。

<datalist> タグは <input> 要素に「自動完成」の機能を提供するために使われます。ユーザーはプレビューボックスに一覧が表示され、その中のオプションは事前に定義されたもので、ユーザーの入力データとして使用されます。

<input> 要素のlist属性を使って <datalist> 要素をバインドしてください。

HTML 4.01 とHTML5の間の違い

<datalist> タグはHTML5 の中の新しいタグ

グローバル属性

<datalist> タグがサポートされています HTMLのグローバル属性。

イベント属性

<datalist> タグがサポートされています HTMLのイベント属性。

HTML: <dd>タグ HTML: <command>タグ