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

★HTML5タグリファレンス

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

<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>
↓↓↓

ブラウザ上の表示

▲ページ先頭へ
トップページ  > HTML5  > <datalist>
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ