ドロップダウンメニューについて
本日の教材動画はこちら
前回選択式入力のタイプについて勉強しました。「1つしか選択できないタイプ」にはラジオボタンとドロップダウンメニューがあることを学び、ラジオボタンの使い方を習いましたが、今回は前回説明されなかった「ドロップダウンメニュー」について勉強していきたいと思います。
＜ドロップダウンメニュー＞について
ドロップダウンメニューは、以下の要素を組み合わせて使います。
・＜select＞タグ
・＜name＞属性（selectタグと併用）
・＜option＞タグ
・＜value＞属性（optionタグと併用）
＜optgroup＞タグ
ドロップダウンメニューは上記の要素のみで使用可能だが、それに追加して＜optgroup＞タグを付与することができる。これはドロップダウン内のメニューをグルーピングするのに利用可能で、例えばメニューの種類別けをするなど、メニューを選びやすくするのに利用される。
＜ドロップダウンメニュー＞の使い方
ドロップダウンメニューのタグの書き方は、以下のようになる
・＜select name="メニュー名"＞＜/select＞で枠組みを作る。
・＜option value="選択肢名"＞選択肢名＜/option＞を枠組みに組み込む。
上記部分が選択できるドロップダウンメニューになる。
・分かりやすく区切りたい場合は＜optgroup laber="ラベル名"＞を挿入。
ラベル名で付けた部分が、選択できない項目としてメニュー内に表示される
言葉で説明するのは難しいため、タグ内容と出来上がったページを見比べてみてくれるとわかりやすいと思います！
