「selectタグを使ってプルダウンメニューを作りたい」

「selectタグの初期値を自由にカスタマイズしたい」

という方にぜひ読んで頂きたい記事です。

この記事では、

について解説しています。

selectタグを使ってプルダウンメニューを作る機会は多くあります。

初期値のカスタマイズ方法もしっかり学んで、selectタグの使い方をマスターしましょう！

【HTMLでプルダウンメニューを作る】selectタグの基本的な使い方

selectタグは、入力フォームなどで良く見かける「プルダウンメニュー（選択式メニュー）」を設置することができる要素です。

以下のように入力項目をselectタグ、選択肢をoptionタグで作成します。

<select name="セレクトボックスの名前">
  <option value="選択肢1の値">選択肢1</option>
  <option value="選択肢2の値">選択肢2</option>
  <option value="選択肢3の値">選択肢3</option>
</select>

上記の記述内にもある通り、selectタグとoptionタグには、役割を指定できる属性があります。

主な属性の役割や値は、以下の表で確認できます。

属性	役割	値
size	selectタグの属性。一度に画面に表示する行数を指定。 （既定値は0、画面には1行が表示される）	数値
name	selectタグの属性。値をフォーム送信する時に必要な名前を指定。	文字列
value	optionタグの属性。セレクトボックスの値を指定。	文字列、数値
disabled	selectタグの属性。このメニューを無効にし、入力できない状態にする。	（disabled）

特に、name属性とvalue属性は必須ですので、しっかり覚えておきましょう。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！

HTMLでselectタグの初期値をコントロールする方法

HTMLの要素であるselectタグは、一番上に記述されたoptionタグが初期値になっています。

しかし、selectタグに特定の属性を使用することで、初期値をある程度自由にカスタマイズすることも可能です。

様々なシチュエーションに対応できるように、考えられる5つのパターンごとにselectの初期値を設定する方法を紹介します。

selectタグの初期値を選択する方法

selectタグの初期値を自分で選択したい場合には「selected」属性を使用します。

<select name="fruits">
  <option value="apple">リンゴ</option>
  <option value="grape">ブドウ</option>
  <option value="banana" selected>バナナ</option>
</select>

selectedはoptionタグに使用する属性で、Webページが読み込まれた最初の時点で選択された状態になります。

上記の場合は「バナナ」がselectタグの初期値として表示されています。

selectタグの初期値を「選択してください」にする方法

selectタグの初期値を「選択してください」という表示にしたい場合にも「selected」属性を使用します。

<select name="fruits">
  <option value="" selected>選択してください</option>
  <option value="apple">リンゴ</option>
  <option value="grape">ブドウ</option>
  <option value="banana">バナナ</option>
</select>

optionタグに「選択してください」のテキストを入力し、selected属性を指定するだけで完了です。

また、一番上に「選択してください」のテキストを入力したoptionタグを設置するだけでも初期値として設定できます。

selectタグの初期値を選択できないようにする方法

selectタグの初期値を選択できないようにする方法は2つあります。

どちらの場合も、selectタグに指定してしまうと全ての項目が選択できなくなってしまうため、optionタグに指定します。

hiddenを使ってselectタグの初期値を選択できないようにする

<select name="fruits">
  <option value="" selected hidden>選択してください</option>
  <option value="apple">リンゴ</option>
  <option value="grape">ブドウ</option>
  <option value="banana">バナナ</option>
</select>

Webページを開いて最初に表示されていた項目は、選択後、表示されなくなります。

上記のように「選択してください」など、最初の表示は必要なものの、選択後は必要なくなる項目などの設定する際に便利な属性です。

また、見た目上は消えてしまうhiddenですが、値は送られているという特徴もあります。

disabledを使ってselectタグの初期値を選択できないようにする

<select name="fruits">
  <option value="" selected disabled>果物</option>
  <option value="apple">リンゴ</option>
  <option value="grape">ブドウ</option>
  <option value="banana">バナナ</option>
</select>

「選択肢として表示させておきたいけど、実際に選択できないようにしたい。」という時に使えるのがdisabledです。

上記のようにselectタグの初期値に指定すれば、選択できないようになり、選択後も表示はされ続けます。

しかし、値を送ることはできないので、重要なデータを取り扱っている時には注意が必要です。

表示させず、こっそりデータだけ取得したい場合はhiddenを一緒に使うと良いでしょう。

selectタグの初期値を選択必須にする方法

selectタグの初期値を選択しないままフォームを送信すると、エラーが表示されるようにしたい場合には、required属性を使います。

<form>
  <select name="fruits" required>
    <option value="" selected disabled>選択してください</option>
    <option value="apple">リンゴ</option>
    <option value="grape">ブドウ</option>
    <option value="banana">バナナ</option> 
  </select>
  <button type="submit">送信する</button>
</form>

required属性は、上記のようにselectタグに指定します。

ただし、あくまでブラウザ上だけでのエラーチェックなので、サーバー側でもエラーチェックできるようにするのが確実です。

selectタグの初期値を「空白」にする方法

selectタグの初期値を「空白」にしたい場合は、optionタグに「value=” “」を指定します。

<select name="fruits">
    <option value="" selected disabled></option>
    <option value="apple">リンゴ</option>
    <option value="grape">ブドウ</option>
    <option value="banana">バナナ</option>
  </select>

単純に、指定したvalue属性の値を空白にし、optionタグにテキストを記述しないというだけです。

しかし、初期値が空白だと、Webサイトを訪れたユーザーにとっては何のプルダウンなのかわかりません。

タイトルなどを記述していない場合は、何を選択するのか記述してあげるのが良いでしょう。

まとめ：HTMLでselectタグの初期値を自分好みにカスタマイズしよう

今回は、HTMLのselectタグの初期値について解説しました。

HTMLだけで簡単にプルダウンメニューが作れるselectタグは、属性も非常にシンプルなものばかり。

初心者でも簡単に利用しやすいですが、フォームの送信結果に関わってくるので、hiddenとdisabledの値を送信できるか否かについてはしっかり把握しておきましょう。

selectの初期値をコントロールする方法5つを参考に、自分好みにカスタマイズしてみてくださいね。

---

知っていますか？IT業界は市場価値が高まっています！市場価値の高い業界で働くことで、現在より年収UPが可能です。

また、 ITスキルを身につけることで、どの業界でも必要とされる人材に成長できます！

【DMM WEBCAMP】のプログラミングスクールでは、未経験から最短3ヶ月でエンジニアとして転職が可能です。

DMM WEBCAMPでは転職成功率９８％の転職コースを複数提供しています

✔︎︎︎企業が本当に求めるビジネススキルを優先的に取得可能！

✔︎︎︎︎キャリアカウンセラーとメンターがあなたの転職活動とスキル獲得を両面サポート‼

✔︎︎︎紹介可能企業は６００社以上！？

IT業界に転職したい方はぜひご覧ください！

＼プログラミングスクールを比較／