ログイン
問題12

selectタグでプルダウンメニューを作ろう

この問題では、formタグで定義したフォームの中でメニュー(セレクトボックス)を作成するために用意されたHTMLのタグです。このselectタグで指定するメニューはプルダウン型で表示されます。問題通して、挙動を確かめていきましょう。

アイコン画像

本のアイコンselectタグとは

selectタグとは、foamタグで作成したフォームの中にメニューを作る為のタグです。
複数のメニューから1つだけ選択する形式であるプルダウンの定義にも使われます。
HTMLでメニューを作るときはselectタグとoptionタグをセットで覚えておきましょう。

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題12:selectタグでプルダウンメニューを作ろう

selectタグとoptionタグを用いて忍者CODE問題集にあるような
「初級コース」、「中級コース」、「上級コース」
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¥
            

コメントのアイコン解説

formタグの内側にselectタグを書き、メニュー(セレクトボックス)を定義します。
selectタグにはname属性を指定するように指示があるので
name属性にquestion-modeを指定します。

次にselectタグの内側にoptionタグを書いていきます。
optionタグはメニューの選択肢を定義します。
今回選択肢は3つあるので始めにoptionタグを3つ用意します。
optionタグは必ずvalue属性を指定します。value属性を指定していないと
ユーザーが選んだ情報が「空欄」の状態になり、
どのような選択肢が選ばれたのかを判別することができません。
value属性の指定ができたら最後にプルダウンに表示するテキストを
optionタグに書けばプルダウンの完成です。
ログインして解答を見る

コメントのアイコン補足

selectタグを使う場合、基本的にはname属性を一緒に設定しておきましょう。

name属性を使えば、入力項目をプログラムで処理するための名前を指定することができます。
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる