HTML
Googleでログイン
selectタグとは
selectタグとは、foamタグで作成したフォームの中にメニューを作る為のタグです。
複数のメニューから1つだけ選択する形式であるプルダウンの定義にも使われます。
HTMLでメニューを作るときはselectタグとoptionタグをセットで覚えておきましょう。
HTMLの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。
問題12：selectタグでプルダウンメニューを作ろう
selectタグとoptionタグを用いて忍者CODE問題集にあるような
「初級コース」、「中級コース」、「上級コース」
3つの中から選択できるプルダウンを作成しましょう。
[条件]
・optionタグにはvalue属性も指定すること
・selectタグにはname属性で名前を付けること(名前:question-mode)
期待する画面を確認しながら作成していきましょう!
※ninja.phpは用意していない為、送信はできません。
「初級コース」、「中級コース」、「上級コース」
3つの中から選択できるプルダウンを作成しましょう。
[条件]
・optionタグにはvalue属性も指定すること
・selectタグにはname属性で名前を付けること(名前:question-mode)
期待する画面を確認しながら作成していきましょう!
※ninja.phpは用意していない為、送信はできません。
あらかじめエディタに書くコード
<form>
</form>
¥HTML¥
期待する画面
解答ソースコード
<form>
<select name="question-mode">
<option value="初級コース">初級コース</option>
<option value="中級コース">中級コース</option>
<option value="上級コース">上級コース</option>
</select>
</form>
¥HTML¥
補足
selectタグを使う場合、基本的にはname属性を一緒に設定しておきましょう。
name属性を使えば、入力項目をプログラムで処理するための名前を指定することができます。
name属性を使えば、入力項目をプログラムで処理するための名前を指定することができます。
#忍者CODE無料問題集で活動を記録しよう
完了にする！
selectタグにはname属性を指定するように指示があるので
name属性にquestion-modeを指定します。
次にselectタグの内側にoptionタグを書いていきます。
optionタグはメニューの選択肢を定義します。
今回選択肢は3つあるので始めにoptionタグを3つ用意します。
optionタグは必ずvalue属性を指定します。value属性を指定していないと
ユーザーが選んだ情報が「空欄」の状態になり、
どのような選択肢が選ばれたのかを判別することができません。
value属性の指定ができたら最後にプルダウンに表示するテキストを
optionタグに書けばプルダウンの完成です。