datalist - 入力候補となるデータリスト

フォーム・コントロールに入力候補となる値をリストします。
候補として提示する値には、子要素のoption要素にて指定します。
フォーム・コントロールのlist属性と同じ値をid値に指定することで関連づけることができます。

想定される利用場面は、検索窓などで表示されるオートコンプリート機能などが挙げられます。
※datalist単体では、子要素を含め画面上では表示されません。(IE9など一部ユーザーエージェントでは、表示されてしまうようなのでCSSなどで非表示を明示するべきでしょう。)

datalist要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
datalist - - - - - - -

datalist要素のHTML4からHTML5への変更点

datalist要素は、HTML5から新たに追加された要素です

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。

「基本」のサンプル

HTMLコード

<form action="request.php" method="get">
<input type="search" name="example" list="web" autocomplete="on">
<datalist id="web">
<option value="html5">HTML5</option>
<option value="html4">HTML4.01</option>
<option value="css3">CSS</option>
<option value="javascript">javascript</option>
<option value="jQuery">jQuery</option>
<option value="YUI">YUI</option>
<option value="FLASH3">FLASH action script3</option>
<option value="FLASH2">FLASH action script2</option>
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
<option value="Ruby">Ruby</option>
<option value="Perl">Perl</option>
</datalist>
<input type="submit" value="送信">
<p>この例の場合、「H」や「F」などoption要素に指定されている値を入力すると入力候補が表示されます。(サポートしているブラウザのみ)</p>
<style>datalist{display:none}</style>
</form>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/the-button-element.html#the-datalist-element)