[HTML]selectboxのrequired設定が効かない時のミス

selectboxにrequiredを設定したが効かない時の単純ミス

初心者プログラマの自分がはまってしまったミスを共有します。

原因は単純でした

下記コードを作成した。選択しない状態で送信(submit)してもrequiredチェックが反応しない・・・

select.html

<select>
    <option value="select" disabled selected required>選択してください。</option>
    <option value="アイス" required>アイス</option>
</select>

原因はdisabledにvalue値が設定されていたため

「選択してください。」を非活性、選択できない初期文言で設定したつもりが、value値を設定してしまったため、選択されていると認識され、空でも送信できた。

下記コードが修正コード

select.html

<select>
    <option disabled selected required>選択してください。</option>
    <option value="アイス" required>アイス</option>
</select>

こんな単純なミスに躓くとは・・・

共有できましたら、幸いです。