Scriptなしでselectを使うには?
選択した項目のページへ移動するselectをよく見掛けるけれど
大抵はスクリプトを使っている。
だが、スクリプトを使わないselectを何処かで見た記憶があって
それが何処だったか思い出せない。
Formタグを使えば行ける気はしたが、そのForm自体も詳しく知らん。
しかし、スクリプトを使わないselectをはてなダイアリーのモジュールと
スタイルシートのテンプレート選択で見っけた。
それらのソースを見て、結構な時間を費やした挙句ようやく動作するようになった。
で、なんとなくわかった事
methodをgetにすると、actionに記述したurlの後ろに
?name=value
な感じで送信するみたいで、methodをpostにしたら何も付かずURLのみだった。
このnameを付けるというのが長い事気付かなかった。
試しに人力検索のページを選択して、そのURLに飛ぶselectを書いた。
2ページのURLが
になってるので、selectのnameをpageに。
送信されるのはactionに指定したurl?page=value。
target=_blankを付けると新しいウィンドウで開く。
methodを省略しても?が付加されるから、デフォルトはgetか?
<form action="http://q.hatena.ne.jp/list" target=_blank method=get> <select name=page> <option value=1>1ページ</option> <option value=2>2ページ</option> <option value=3>3ページ</option> <option value=4>4ページ</option> <option value=5>5ページ</option> <option value=6>6ページ</option> </select><input type=submit value=移動> </form>
移動先では、Scriptのlocation.searchでこのパラメータ?を参照出来る。
追記
ラジオボタンというのは普通に使うとチェック出来ないけれど
Formにするとチェック出来るのを知りました。
それと、リセットボタンがあるというのも。
下記の場合はリセットボタンは必要ないけれど
nameがそれぞれ違う場合は複数選択が出来て
それらを取り消すのにリセットボタンが使える。
<form action="http://q.hatena.ne.jp/list" target=_blank method=get> <input type=radio value=1 name=page>1ページ <input type=radio value=2 name=page>2ページ <input type=radio value=3 name=page>3ページ <br><input type=submit value=移動><input type=reset value=取消し> </form>
追記
ラジオボタンはnameを付ければ使えた。
てっきりFormにしないければ使えないと勘違いしてしまった。
追記
labelを付けると、文字のクリックでチェックのOnOffが出来るようになるみたいだ。
idを付けて、for=idで対象を指定だと。
<input type=radio value=1 name=page id=la><label for=la>1ページ</label>