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

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

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

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

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

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

基本

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

20150628_1

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

初期値を設定する

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

20150628_2

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

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

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

 アレです、アレ。

20150628_3

20150628_4

20150628_5

三井住友 VISA カード、チケットぴあ、ETC マイレージサービス、Panasonic の登録フォームでソースを確認したんですが、value は上のように空だったり、0(ゼロ)だったり、「選択してください」だったりとまちまちでした。受け取ったサーバのほうで処理すればよいということかと思います。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP