HTMLの<select>タグで初期値以外の選択を必須にして、初期値は表示させないようにしたいことはよくあることかと思います。
この記事ではその方法をわかりやすく解説していきます。
ここでいう初期値とは、「選択してください」など未選択時では表示させたいが、選択肢には並べたくない選択肢のことを指します。
初期値を含めたselectタグを用意
まず初めに、基本となる<select>タグと<option>タグを用意します。
<select name="fruits">
<option value="">選択してください</option>
<option value="apple">りんご</option>
<option value="orange">みかん</option>
<option value="grape">ぶどう</option>
</select>初期値となる選択肢は、選択肢の中で必ず一番上に置きます。
一番上に配置すれば未選択の状態で表示されるので、selected属性は不要です。
ここには記載していませんが、フォームには<form>タグと送信ボタンが必要なので適宜用意してください。
また、バックエンドの処理ではname属性でどの要素かを判定するため、name属性はつけておきましょう。
name属性は日本語でも問題ないみたいですが、心配であればバックエンド処理担当の方と相談すると良いと思います。
ここで初期値の<option>タグに空のvalue属性をつけることを忘れないように！
value属性をつけないと後で必須選択にできません。
ここは忘れやすいところなので気をつけましょう。
selectタグにrequired属性をつける
続いて、１つ以上の選択を必須にするために、<select>タグにrequired属性をつけます。
<option>タグではないので気をつけましょう。
<select name="fruits" required>
<option value="">選択してください</option>
<option value="apple">りんご</option>
<option value="orange">みかん</option>
<option value="grape">ぶどう</option>
</select>これで、どれか１つ以上を選択しないと送信できなくなります。
初期値にhidden属性をつける
必須ではありませんが、初期値を非表示にさせたいときは、初期値の<option>タグにhidden属性をつけます。
<select name="fruits" required>
<option value="" hidden>選択してください</option>
<option value="apple">りんご</option>
<option value="orange">みかん</option>
<option value="grape">ぶどう</option>
</select>これで、初期値は選択肢に表示されなくなります。
ちなみに、初期値にselected属性とdisabled属性をつける方法でも選択できないようにはできますが、その方法では必須選択にはできません。
まとめ
以上で実装は完了です。
厳密にバリデーションするとなるとバックエンドでの処理が必要になりますが、HTML側で簡単にバリデーションできるのでしない手はないでしょう。
フォーム要素はHTMLの中でもやっかいな要素が多いですが、正しく理解すれば実際は簡単なので、どんどん活用してきましょう！