今回はHHTMLでお問い合わせフォームなどに良くある、都道府県など複数の項目の中から1つを選択するプルダウンメニュー(ドロップダウンメニュー)の作成の仕方を紹介します。
HTMLでプルダウンメニューの作成の仕方
ここで言う「プルダウンメニュー」下記の様なクリックすると選択項目が表示されるものです。
プルダウンメニューを作成する際には、以下のHTMLを使用します。
<select name=”送信時の名前”> | プルダウンメニュー |
<option value=”送信される値”>選択時のテキスト</option> | プルダウンメニューの項目 |
プルダウンメニューは<select>タグと、その子要素として<option>タグを組み合わせて作成します。
プルダウンメニューを正しく動作させるには<select>タグにname属性、<option>タグにvalue属性を付ける必要があります。
また<option>タグにはselected属性をつけることが出来ます。この属性はページが表示された時に選択された状態になります。
プルダウンメニューのHTMLの基本構造は以下です。
<label for="">ラベル</label><br>
<select name="送信時の名前">
<option value="" selected>
選択して下さい
</option>
<option value="送信される値1">
選択肢1
</option>
<option value="送信される値2">
選択肢2
</option>
</select>
先程の「都道府県」のプルダウンメニューのHTMLは以下の様になっています。
HTML
<label for="">都道府県</label><br>
<select name="">
<option value="" selected>
選択して下さい
</option>
<option value="1">
北海道
</option>
<option value="2">
青森県
</option>
<option value="3">
岩手県
</option>
<option value="4">
宮崎県
</option>
<option value="5">
秋田県
</option>
<option value="6">
山形県
</option>
<option value="7">
福島県
</option>
<option value="8">
茨城県
</option>
<option value="9">
栃木県
</option>
<option value="10">
群馬県
</option>
<option value="11">
栃木県
</option>
<option value="12">
埼玉県
</option>
</select>
以上が「HTMLでプルダウンメニューの作成の仕方:お問い合わせなどに使用」でした。
現場では、良くお問い合わせの項目で使用します。ほとんどの案件で使用するのでしっかりと覚えておきましょう。