このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

datalist要素:テキスト入力欄の入力候補HTML5で追加

記事Sep.19th, 2020
テキスト入力欄の入力候補を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

datalist”要素はinput”要素で表されるテキスト入力欄への入力候補のリストを表します。

一つ一つの入力候補は子要素となるoption”要素で表されます。

datalist”要素はid”属性input”要素list”属性によって入力欄に関連付けられます。

サンプルコード

<form method="post" action="sample-inputtag7.php" target="_blank">
<fieldset>
<p><label>好きな果物:<input type="text" name="fruit" list="fruitlist"></label></p>
<datalist id="fruitlist">
<option value="甘蕉">
<option value="林檎">
<option value="甜瓜">
<option value="苺">
<option value="桃">
</datalist>
<p><label>好きな野菜:<input type="text" name="vege" list="vegelist"></label></p>
<datalist id="vegelist">
<option value="南瓜">
<option value="甘藍">
<option value="甘藷">
<option value="西瓜">
<option value="茄子">
</datalist>
</fieldset>
<fieldset>
<legend>猫</legend>
<p><label>このくらい好き:<input type="range" name="cat" min="0" max="100" id="catlist"></label></p>
<datalist id="catlist">
<option value="50">
<option value="75">
<option value="90">
<option value="100">
</datalist>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>

*送信すると入力内容が表示されます。

一般的なブラウザでは入力欄をクリックすると入力候補の一覧が表示されます。

datalist”要素の中にはoption”要素だけでなく、“datalist”要素に対応していない古いブラウザのための代替内容も配置することができます。以下の例では“datalist”要素に対応していないブラウザでは内容のselect”要素がテキスト入力欄とともに表示されて入力候補を示すことができます。

<form method="post" action="sample-inputtag9.php" target="_blank">
<p><label>好きな動物:<input type="text" name="favorite" list="animals"></label></p>
<datalist id="animals">
<label>
もしくはこちらから選択:
<select name="favorite">
<option value="">
<option>三毛猫</option>
<option>黒猫</option>
<option>茶トラ猫</option>
<option>ほかの猫</option>
</select>
</label>
</datalist>
<p><button type="submit">送信する</button></p>
</form>

*送信すると入力内容が表示されます。

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性

要素の内容

datalist”要素の内容は以下のいずれかです。

仕様書

datalist”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<datalist>
削除

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク