“option”要素~“label”属性

“label”属性について

“label”属性は“option”要素で表される入力候補のラベルを表します。

“option”要素が“select”要素の子孫要素である場合、“label”属性の値が入力候補として表示されます。“label”属性を省略した場合は“option”要素の内容が入力候補として表示されます。なお、入力候補が選択されたときにフォームで送信される値は“value”属性の値、もしくは“option”要素の内容です。

“option”要素が“datalist”要素の子要素である場合、通常“label”属性の値は入力候補の補足情報として表示されます。

“label”属性と“value”属性をどちらも指定する場合は“option”要素は空要素です。

指定できる値

サンプルコード

選択式の入力欄

<form method="post" action="sample-selecttag1.php" target="_blank">

<fieldset>

<p>

<label>

好きな魚：
<select name="fish">

<option value="" label="--選択--">
<option value="鮪" label="まぐろ">
<option value="鰹" label="かつお">
<option value="鮭" label="さけ">
<option value="鯵" label="あじ">
<option value="鮫" label="サメ">

</select>

</label>

</p>

</fieldset>
<p><input type="submit" value="送信する"></p>

</form>

好きな魚：

テキスト入力欄への入力候補

<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><input type="submit" value="送信する"></p>

</form>

好きな果物：

好きな野菜：

猫

このくらい好き：