HMTLでselectタグの初期値を自由に設定する方法とは？基本と応用の使い方も解説
「selectタグを使ってプルダウンメニューを作りたい」
「selectタグの初期値を自由にカスタマイズしたい」
という方にぜひ読んで頂きたい記事です。
この記事では、
- HTMLにおけるselectタグの基本的な使い方
- selectタグの初期値の色々な設定方法
について解説しています。
selectタグを使ってプルダウンメニューを作る機会は多くあります。
初期値のカスタマイズ方法もしっかり学んで、selectタグの使い方をマスターしましょう！
【HTMLでプルダウンメニューを作る】selectタグの基本的な使い方
selectタグは、入力フォームなどで良く見かける「プルダウンメニュー（選択式メニュー）」を設置することができる要素です。
以下のように入力項目をselectタグ、選択肢をoptionタグで作成します。
<select name="セレクトボックスの名前">
<option value="選択肢1の値">選択肢1</option>
<option value="選択肢2の値">選択肢2</option>
<option value="選択肢2の値">選択肢3</option>
</select>上記の記述内にもある通り、selectタグとoptionタグには、役割を指定できる属性があります。
主な属性の役割や値は、以下の表で確認できます。
| 属性 | 役割 | 値 |
| size | selectタグの属性。一度に画面に表示する行数を指定。（通常は1） | 数値 |
| name | selectタグの属性。値をフォーム送信する時に必要な名前を指定。 | 文字列 |
| value | optionタグの属性。セレクトボックスの値を指定。 | 文字列、数値 |
| disabled | selectタグの属性。このメニューを無効にし、入力できない状態にする。 | （disabled） |
特に、name属性とvalue属性は必須ですので、しっかり覚えておきましょう。
「独学でのプログラミング学習に苦戦していませんか？」
独学でのプログラミング学習の挫折率は9割以上と言われています。
✔プログラミングを身につけて、年収をUPさせたい
✔ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない
と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします！
完全無料なので、悩む前に今すぐ下のバナーをクリックして資料を読んでみてください！
＼簡単30秒／
下のバナーからLINE友だち追加をして、無料で限定資料をGET！
HTMLでselectタグの初期値をコントロールする方法
HTMLの要素であるselectタグは、一番上に記述されたoptionタグが初期値になっています。
しかし、selectタグに特定の属性を使用することで、初期値をある程度自由にカスタマイズすることも可能です。
様々なシチュエーションに対応できるように、考えられる5つのパターンごとにselectの初期値を設定する方法を紹介します。
- selectタグの初期値を選択する方法
- selectタグの初期値を「選択してください」にする方法
- selectタグの初期値を選択できないようにする方法
- selectタグの初期値を選択必須にする方法
- 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つあります。
- hidden：別の選択肢を選んだらセレクトボックス消える。値は送られる。
- disabled：別の選択肢を選んでもセレクトボックスから消えない。値は送られない。
どちらの場合も、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つを参考に、自分好みにカスタマイズしてみてくださいね。
「プログラミング学習に苦戦しているあなたへ」
独学でのプログラミング学習の挫折率は9割以上と言われています。
✔プログラミングを身につけて、年収をUPさせたい
✔ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない
と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします！
完全無料なので、悩む前に今すぐ下のバナーをクリックして資料をGETしましょう！
＼簡単30秒／
下のバナーからLINE友だち追加をして、無料で限定資料をGET！
