# HTMLフォームのselect要素を必須項目にする

## 困りごとの内容

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>

ユーザーは，クリックして１～３のうちから何かを選んで，送信します．

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

### うまくいかない方法

単純にフォームに `required` を指定してもうまくいきません．

text タイプのフォームであればそれでうまくいきますが，select タイプのフォームは常に何かが選択された状態になっていますから，機能しません．

## 解決策

まず 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>