HTMLでプルダウンメニューを表示する方法を解説!

HTMLでプルダウンメニューを表示するには「selectタグ」「optionタグ」を使います。今回はプルダウンメニューの表示方法と、更に応用として初期値の設定や選択肢のグループ化について解説します。

コンテンツ [表示]

  1. 1HTMLでプルダウンメニューを表示したい
  2. 2HTMLでプルダウンメニューを表示する方法
  3. 2.1解説
  4. 2.2選択肢をグループ化する方法
  5. 3プルダウンメニューのタグの属性
  6. 3.1select要素
  7. 3.2option要素の属性
  8. 3.3optgroupの属性
  9. 4その他プルダウンメニューに関する情報

HTMLでプルダウンメニューを表示したい

プルダウンメニューの例

HTMLではプルダウンメニュー(人によってはドロップダウンメニューなどと呼ぶ)をWEBサイトではよく見かけますよね。

このプルダウンメニューですが、formタグと一緒にselectタグとoptionタグを使うことで簡単に実現することが出来ます。

今回はHTMLでプルダウンメニューを表示するための方法と、更にプルダウンメニューでは初期値の設定や、特定の選択肢を選択不可にするなどいくつかオプション的な使い方が存在しますのであわせて解説していきます。

HTMLでプルダウンメニューを表示する方法

それではまずHTMLでプルダウンメニューを表示する基本の使い方です。selectタグoptionタグの基本の使い方は下記のようになります。

解説

selectタグはformタグの中に追加します。selectタグの中には更に選択肢であるoptionタグを選択肢の数だけ追加します。

上記例ではselectタグの中にoptionタグが2つあり、選択肢の「2020年」「2021年」の2つがプルダウンメニューで表示されるかと思います。

もしも3つ目の選択肢を増やしたい場合は、3つめのoptionタグを追加することで選択肢を追加することが出来ます。

選択肢をグループ化する方法

またoptionタグはoptgroupタグと組み合わせることで、選択肢をグループ化して表示することが出来ます。

上記の例ではoptgroupタグを使い、選択肢を2つのグループ「選択する年①」「選択する年②」に分けています。

選択肢の数が多い場合でグループ化可能な選択肢の場合は、ぜひoptgroupを使ってグループ化をしましょう。

プルダウンメニューのタグの属性

select要素には設定可能な属性があり、その設定によりプルダウンメニューの挙動が代わります。順番にselect要素の属性を解説していきます。

select要素

name

name属性の例

<select name="year">
  <option>2020年</option>
  <option>2021年</option>
</select>

formタグでは最終的に送信先があり、送信先にフォームの情報が渡されます。その際にフォームの各要素毎に名前が付けられます。

例えばname="year"とすることで、送信先では送信されてきたパラメータの中でyearというパラメータ名で情報を取り出すことが出来ます。

size

selectタグにsize属性を設定することでプルダウンでデフォルトで表示させる選択肢の数を変更することが出来ます。

例えば上記の例では、上部のsize属性を設定しない場合は、見えている選択肢は1つですが、下部のsize属性に5を設定すると、5つ分の選択肢の領域で見えるようになっています。

multiple

例えば趣味についてプルダウンから選択させる場合には1つだけとは限りません。

通常は選択できるのが1つのみのselectタグですが、multipleを指定すると複数選択することが出来るようになります。

例えば上記のプレビューの選択肢でPCであればShiftを押しながら選択してみてください。するとmultiple属性が設定されているプルダウンメニューのみ複数選択ができるようになっているかと思います。

disabled

disabledは名前の通り、無効になります。disabledが有効になっていると選択すること自体ができなくなります。

上記の例ではdisabledを設定した方(前者)ではプルダウンメニュー自体が選択できないようになっています。

option要素の属性

選択肢であるoption要素にも設定可能な属性があります。こちらも順番に紹介していきます。

value

optionタグのvalueが最後にフォームの送信先にデータが送られる際の値となります。

例えば下記の例を考えてみましょう。

optionのvalueの例

<select name="year">
  <option value="2020">2020年</option>
  <option value="2021">2021年</option>
</select>

ブラウザでプルダウンメニューで表示される選択肢は「2020年」「2021年」ですが、実際に送信されるデータはvalueで指定した「2020」または「2021」となります。

selected(初期値の設定)

optionタグでselected属性が設定された選択肢はデフォルトで選択された状態、つまり初期値となります。

上記の例ではselectedが設定されている選択肢がデフォルトで選択されるようになっているかと思います。

通常は選択肢の中から1つだけに設定する属性ですが、もちろんmultipleが設定されてれば、selectedも複数設定することが出来ます。

disabled

selectタグのdisabledと同じく、disabledが設定された要素は無効となります。つまりここでは選択不可となります。

上記例ではoptiondisabled属性が設定された選択肢は選択できないようになります。

optgroupの属性

label

optgrouplabel属性は選択肢をグルーピングした際の、ラベルを表します。何らかの意図でグループしたら、その意図に沿う名前を付けましょう。

disabled

optgroupdisabledが設定されると選択不可となります。optgroupの場合はその下に紐づくoption要素もまとめて選択不可となりますので注意しましょう。

その他プルダウンメニューに関する情報

下記の記事ではHTMLでプルダウンメニューで選択した際に、リンクのようにページを切り替える方法について紹介しています。

ぜひあわせて参考にしてみて下さい。

あわせて読みたい
HTMLのプルダウンメニューをリンクにする方法!のイメージ
HTMLのプルダウンメニューをリンクにする方法!
HTMLのプルダウンメニューをリンクにする方法を紹介します。またプルダウンメニューのリンクで別タブで開く方法についても解説します。
今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次