“datalist”要素:テキスト入力欄の入力候補

要素について

“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”要素の内容は以下のいずれかです。

• フレージング・コンテンツ
• 0個以上の“option”要素とスクリプト支援要素

仕様書

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

定義されている仕様書

<datalist>