Scriptなしでselectを使うには?

選択した項目のページへ移動するselectをよく見掛けるけれど
大抵はスクリプトを使っている。
だが、スクリプトを使わないselectを何処かで見た記憶があって
それが何処だったか思い出せない。


Formタグを使えば行ける気はしたが、そのForm自体も詳しく知らん。
しかし、スクリプトを使わないselectをはてなダイアリーのモジュールと
スタイルシートのテンプレート選択で見っけた。
それらのソースを見て、結構な時間を費やした挙句ようやく動作するようになった。


で、なんとなくわかった事
methodをgetにすると、actionに記述したurlの後ろに

?name=value

な感じで送信するみたいで、methodをpostにしたら何も付かずURLのみだった。
このnameを付けるというのが長い事気付かなかった。


試しに人力検索のページを選択して、そのURLに飛ぶselectを書いた。






2ページのURLが

http://q.hatena.ne.jp/list?page=2

になってるので、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がそれぞれ違う場合は複数選択が出来て
それらを取り消すのにリセットボタンが使える。


1ページ
2ページ
3ページ


<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>