1

問題の要約

HTMLでフォームを作っています.

その中に次のような select要素があります.

<form>
    <select name="hogehoge">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <p class='button'>
        <input type='submit' value='送信'>
    </p>
</form>

ユーザーは,クリックして1~3のうちから何かを選んで,送信します.

このときに,select 要素の内容を必須項目にするにはどうしたらいいでしょうか?

試したこと

フォームに required を指定してみてもうまくいきません.select タイプのフォームは常に何かが選択された状態になっていますから,機能しません.

1 件の回答 1

2

まず selected にした option を用意し,そこに「選択してください」などの選択を促す文言を書きます.これで「選択してください」が選択された状態からスタートするようになります.

その option の value の値は空白にしておきます.これで,初期状態のまま送信しようとするとブラウザから「必須項目です」と警告されるようになります.

そのままだと「選択してください」が選択できてしまうので,disabled にします.

つまり,以下のように書きます.

<form>
    <select name="hogehoge" required>
        <option value="" disabled selected>選択してください</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <p class='button'>
        <input type='submit' value='送信'>
    </p>
</form>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。