“input”要素~“list”属性

“list”属性について

“list”属性は“input”要素を“datalist”要素で表される入力候補のリストと関連付ける属性です。

“list”属性は“type”属性に以下の値が指定されている場合に使用できます。

• “text”
• “search”
• “url”
• “tel”
• “email”
• “date”
• “month”
• “week”
• “time”
• “datetime-local”
• “number”
• “range”
• “color”

“form”属性の値には“input”要素を関連付ける同じ文書内にある“datalist”要素の“id”属性の値を指定します。

ブラウザは入力欄に関連付けられた“datalist”要素の子要素である“option”要素の“value”属性と“label”属性の値を使用して入力候補をユーザーに示します。また、入力欄に入力できる書式に合致しない入力候補は表示されません。

ブラウザはユーザーが入力欄に入力するときに入力候補が表示されます。ユーザーが入力候補を選択すると、ユーザーが自ら入力した場合と同様に選択された候補が入力欄に入力された状態になります。なお、ユーザーは必ずしも入力候補を選択する必要はなく、入力候補に含まれない入力値を自分で入力して送信することもできます。

入力候補の数が多い場合はブラウザはこれまでのユーザーの入力などから判断して関連性が高い候補のみに絞って表示することができます。

指定できる値

サンプルコード

<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="甘蕉" label="バナナ">
<option value="林檎" label="りんご">
<option value="甜瓜" label="メロン">
<option value="苺" label="いちご">
<option value="桃" label="もも">

</datalist>
<p><label>好きな野菜：<input type="text" name="vege" list="vegelist"></label></p>
<datalist id="vegelist">

<option value="南瓜" label="かぼちゃ">
<option value="甘藍" label="キャベツ">
<option value="甘藷" label="さつまいも">
<option value="西瓜" label="スイカ">
<option value="茄子" label="なす">

</datalist>

</fieldset>
<fieldset>

<legend>猫</legend>
<p><label>このくらい好き：<input type="range" name="cat" min="0" max="100" list="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>

好きな果物：

好きな野菜：

猫

このくらい好き：

送信する

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