HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> HTMLタグ辞典 >> フォームタグ >> 選択型のプルダウンメニューを作る

フォームタグ

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

<select name=""><option value="">

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

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

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

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

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

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

タグをコピーする

記述例

<form>
<select name="都道府県">
<option value="1">北海道</option>
<option value="2" selected>東京</option>
<option value="3">沖縄</option>
</select>
</form>

☆ワンポイントアドバイス

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

→関連情報

参考

タグをコピーするには?

操作方法

→マウスでフォーム内に書かれたタグをクリックするとタグがハイライトするので、マウスの右クリックでコピーするか、キーボードの[Ctrl]+[C]を押すと、コンピュータのメモリに記憶されます。後は任意の場所に貼り付けてください。