HMTLでselectタグの初期値を自由に設定する方法とは?基本と応用の使い方も解説

2021.09.17
html 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タグには、役割を指定できる属性があります。

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

属性役割
sizeselectタグの属性。一度に画面に表示する行数を指定。(通常は1)数値
nameselectタグの属性。値をフォーム送信する時に必要な名前を指定。文字列
valueoptionタグの属性。セレクトボックスの値を指定。文字列、数値
disabledselectタグの属性。このメニューを無効にし、入力できない状態にする。(disabled)

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


「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

経済産業省認定の圧倒的カリキュラム

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つあります。

  1. hidden:別の選択肢を選んだらセレクトボックス消える。値は送られる。
  2. 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つを参考に、自分好みにカスタマイズしてみてくださいね。


「HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
通学不要!スキマ時間でプログラミング学習ができる!
✔未経験者のために開発された効率的な学習カリキュラムを用意!
✔ライフコーチが卒業まであなたの学習をサポートします!

経済産業省認定の圧倒的カリキュラム

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5