体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

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

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

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

 

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

 

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

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

 

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

・タグ

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

・タグ

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

・value属性

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

・タグ

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

 

20160620

 

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

 

20163020-2

 

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

 

20160620

 

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

 

20163020-2

 

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

 

 

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

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

 

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

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

1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

 

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

dropdownmenu

 

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

dropdownmenu2
1 2次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。