トップページ  > HTML5  > <datalist>

★HTML5タグリファレンス

<datalist> …… 入力候補となるデータリストを定義するHTML5から追加
Opera9Opera10
広告

このページでは、HTML5のdatalist要素を解説しています。
datalist要素の最新情報は、以下を参照してください。

HTML Living Standardリファレンス

<datalist>タグは、フォームの入力欄などで入力候補となるデータリストを定義します。 各データのリスト項目は、<option>タグで定義します。 <datalist>タグをサポートしたブラウザでは、 <option>タグで指定された値がユーザーに対して入力候補として提案表示されます。

<datalist>タグを使って作成するインターフェースの具体的な例を挙げると、 検索エンジンでキーワードの入力候補を表示するオートコンプリート機能などです。 この場合、キーワードの入力欄は<input>タグで作成しますが、 <input>タグのlist属性の値と、 <datalist>タグのid属性の値を同じにして、入力欄とデータリストを関連付けます。

<datalist>~</datalist>の内容は、その子要素も含めてブラウザ上では表示されないことになっています。

■HTML4.01からHTML5へのバージョンアップによる変更点

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

■使用例

HTMLソース

<form>
<fieldset>

<input type="search" name="q" autocomplete="on" list="keywords">
<datalist id="keywords">
<option value="ウィキペディア">
<option value="ウィルス対策">
<option value="ウィンドウズ">
</datalist>

<input type="submit" value="送信">
</fieldset>
</form>
↓↓↓

ブラウザ上の表示

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ