選択型のプルダウンメニューを作る

<select name=””><option value=””>

複数の項目から1つの項目を選ぶ場合、ラジオボタンでも可能ですが、プルダウンメニューであれば、スペースを多く取らずに、すっきりと項目をまとめることができて便利です。
ラジオボタンと同じく複数の項目を同時に選択することはできません。

<select>タグで全体の名前などを設定し、実際の項目は<option>タグで指定します。

<select>タグに「name=””」という属性を追加すると、プルダウンメニューに名前をつけることができます。1つのフォーム内に複数のプルダウンメニューを設置する場合などに必要とします。

また、<option>タグについては各項目の送信内容を指定するために「value=””」という属性を追加します。この中に記入された文字が実際に送信されます。

ただし、あくまでこれは送信内容を指定するものですので、プルダウンメニューに表示される項目名については改めて指定する必要があります。この項目名は「<option>項目名</option>」のようにタグ内に書き入れます。なお、終了タグ</opition>は省略可能です。 メニューの配列順序は<option>タグの記述順序と同期します。上から順に表示されます。

また、最初にメニューに表示しておく項目を指定することができます。この場合は、表示しておきたい項目のある<option>タグにのみ「selected」と書き入れます。複数設定はできません。

記述例

<forma action=”#”>
<select name=”都道府県”>
<option value=”1″>北海道</option>
<option value=”2″ selected>東京</option>
<option value=”3″>沖縄</option>
</select>
</form>


<select>タグは単体では動作しません。必ずフォームタグの中に挿入してください。

関連情報

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

最新のHTML5を学ぶなら

参考情報

最新情報をチェックしよう!