HTMLでドロップダウンメニューを表示する方法【初心者向け】

HTML初心者向けに、「ドロップダウンメニュー」を表示する方法を解説した記事。【selectタグ】や【optionタグ】を使って実装。選択肢の多い項目のフォームを作成する場合は、無駄なスペースを省いてページをすっきり見せることができます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、ドロップダウンメニューを表示する方法について解説します。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

ドロップダウンメニューとは

ドロップダウンメニューは、たくさんの選択肢の中からどれかひとつを選ぶタイプのメニューバーです。ラジオボックスやチェックボックスと異なり、たくさんの選択肢がある場合に場所をとらずに表示することができます。

 

HTMLでは下記のタグで実装可能です。

・<select>タグ

ドロップダウンメニューをつくります。

・<option>タグ

ドロップダウンメニューに表示される項目をつくります。

・value属性

選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。

・<optgroup>タグ

複数の<option>タグをグループ分けし、メニューをわかりやすく表示させます。

 

大石ゆかり

ドロップダウンメニューもフォームの部品なんですか?

田島悠介

そうそう。都道府県を選んだり、月を選んだりする場合に向いている項目なんだよ。

大石ゆかり

複数の中から1つ選ぶ、という感じですね。

田島悠介

そうだよ。では、実際に書いてみよう!

 

ドロップダウンメニューを実装する

それでは実際にコードの例をみていきましょう。

 

今回は月を選択するドロップダウンメニューをつくります。

<option>タグで項目を囲み、valueを設定します。name属性が”month”の<select>タグで<option>を囲みましょう。

<select name=”month”>
<option value=”jan”>1月</option>
<option value=”feb”>2月</option>
<option value=”mar”>3月</option>
<option value=”apr”>4月</option>
<option value=”may”>5月</option>
<option value=”jun”>6月</option>
<option value=”jul”>7月</option>
<option value=”aug”>8月</option>
<option value=”sep”>9月</option>
<option value=”oct”>10月</option>
<option value=”nov”>11月</option>
<option value=”dec”>12月</option>
</select>

 

ブラウザで表示すると、小さなドロップダウンメニューが表示されました。クリックすると、1月から12月の項目が縦に並びます。

dropdownmenu

 

同じ要領で、日にちのドロップダウンメニューも追加してみましょう。

dropdownmenu2

月と日にちを組み合わせて、簡単な日付の選択バーができましたね。

 

続いて、都道府県を選択するドロップダウンメニューをつくってみましょう。name属性で”address”と指定し、<option>タグで各都道府県の項目をつくり、valueに県名を指定します。さらに、項目を選択しやすくするために<optgroup>タグで<option>タグをグルーピングしましょう。

name属性、label属性、value属性で指定した値は、送信された先でデータの集計をしたり、データを保存したりする際に使われます。

<select name=”address”>
<optgroup label=”関東”>
<option value=”tokyo”>東京</option>
<option value=”chiba”>千葉</option>
<option value=”saitama”>埼玉</option>
</optgroup>
<optgroup label=”関西”>
<option value=”osaka”>大阪</option>
<option value=”hyogo”>兵庫</option>
<option value=”kyoto”>京都</option>
</optgroup>
</select>

 

こうすることで、都道府県名の頭に<optgroup>タグで指定した”関東”と”関西”が表示されました。

これならユーザーも探しやすそうですね。

dropdownmenu3

 

選択肢の多い項目はラジオボタンやチェックボックスよりも、ドロップダウンメニューを使って表示したほうが無駄なスペースを省くことができ、ページをすっきりさせることができます。選択肢が多いときには<optgroup>タグを適宜つかって項目を整理すると、ユーザー目線の使いやすいページをつくることができることでしょう。

 

今回はドロップダウンメニューを表示する方法についてご紹介しました。

HTMLでフォームをさらにカスタマイズしたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。

 

大石ゆかり

selectタグがあって、その中にoptionタグで選択項目を表示しているっていうのはわかるんですが・・・。

田島悠介

HTMLでは出来ないけど、PHPプログラミングで送ったデータを受け取れるんだよ。selectのnameは、value値だったという感じで受け取れるんだ。今は気にしなくてもいいよ。

大石ゆかり

selectタグも、ページ表示時に何かの項目を選択状態にしておくことは出来るんですか?

田島悠介

出来るよ!selectedだよ。チェックボックスの時は、checkedだったね。

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。