Sep.21st, 2020
＃
“value”属性について
“value”属性は“option”要素で表される入力候補を選択したときにフォームで送信される入力値を指定します。
“option”要素が“select”要素の子孫要素である場合、フォームを送信したときに“select”要素の“name”属性の値とともに“value”属性の値が送信されます。“value”属性を省略した場合は“option”要素の内容が値として送信されます。
“select”要素に“required”属性が指定され、“size”属性の値が“1”であり、かつ“multiple”属性が指定されていない場合、
その子要素となる最初の“option”要素の“value”属性の値が空であればその“option”要素はプレースホルダーとなります。プレースホルダーが選択された状態では入力欄は未入力とみなされてフォームは送信できません。
“value”属性と“label”属性をどちらも指定する場合は“option”要素は空要素です。
＃
＃
サンプルコード
選択式の入力欄
<form method="post" action="sample-selecttag1.php" target="_blank">
<fieldset>
<p>
<label>
好きな魚：
<select name="fish">
<option value="">--選択--</option>
<option value="鮪">鮪</option>
<option value="鰹">鰹</option>
<option value="鮭">鮭</option>
<option value="鯵">鯵</option>
<option value="鮫">鮫</option>
</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="甘蕉">
<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" 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>
