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

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月の項目が縦に並びます。

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

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

続いて、都道府県を選択するドロップダウンメニューをつくってみましょう。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>タグで指定した”関東”と”関西”が表示されました。

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

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

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

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

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

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

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

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

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