登録フォームでよく見るプルダウンメニューの使い方

2015年6月28日カテゴリー : CSS コメント : 0

　複数の項目からひとつを選ぶときに使うプルダウンメニューは、やることはラジオボタンと同じなのですが、場所を取らずにすっきりとしたレイアウトに仕上げることができます。立ち上げたばかりの超弱小な当ブログにはあまり関係ありませんが、何年もの間ブログを運営し続けると、アーカイブが数十行にもなってしまい、見た目がよろしくありません。

　WordPress では wp_get_archives 関数を使って、月別アーカイブのリンクをプルダウン式にする方法があります。

[WP]WordPressで月別アーカイブのリンクをプルダウン式で出力する方法

WordPressで月別アーカイブのリンクをプルダウン式にする | cms helog – CMS構築を目的にPHPをベースとしたWordPress、CakePHPやPEARなどオープンソースを中心に解説しています

いつかはこのようなレイアウトにしたいと思い、プルダウンメニューの基本的なことをまとめてみました。

基本

　使うタグは select タグと option タグです。

<select name="susi">
<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>
</select>

</select>

select タグに name 属性を追加すると、プルダウンメニューに名前をつけることができます。option タグのvalue 属性ですが、これは項目を選択したときに実際に送信される内容です。プルダウンメニューに表示される項目名が送信されるわけではないことに注意して下さい。

初期値を設定する

　「selected」を使います。「はまち」を初期値にしてみます。

<select name="susi">
<option value="1">まぐろ</option>
<option value="2">サーモン</option>
<option value="3">いくら</option>
<option value="4">たまご</option>
<option value="5">たい</option>
<option value="6" selected>はまち</option>
<option value="7">あじ</option>
<option value="8">えんがわ</option>
</select>

</select>

当然ですが、ひとつしか設定できません。一応、ふたつ設定しても動作はします。

<select name="susi">
<option value="1">まぐろ</option>
<option value="2">サーモン</option>
<option value="3">いくら</option>
<option value="4">たまご</option>
<option value="5">たい</option>
<option value="6" selected>はまち</option>
<option value="7">あじ</option>
<option value="8" selected>えんがわ</option>
</select>

</select>

この場合、初期値として表示されるのは「えんがわ」です。

登録フォームなどでよく目にするアレを設定してみる

　アレです、アレ。

<select name="susi">
<option value="">-- 注文が決まったらお呼びください --</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>
</select>