戻るボタンの実装方法について

鷹の島さんで面白い記事を見つけました。

確認画面や複数ページにわたる入力画面などでよく使われる、前の画面の入力フォームに戻る機能を実装するための『戻る』ボタンと、次の画面に移動する際の『次へ』とかのボタンの実装方法についてかかれてます。

例で挙げられているはてなが使ってたらしい実装方法
<input name="mode" type="submit" value="もどる">
<input name="mode" type="submit" value="申し込み">
確かにこれだとテキストフィールドなどにフォーカスがある際にエンターキーを押されると前のページに戻ります。
実装方法としては好ましくないでしょう。

次に例で挙げられてるものは
<input value="もどる" onclick="location.href='./credit'" type="button">
<input value="申し込み" type="submit">
というもの
前述の例が前画面に情報をsubmitするのが目的だとしたら、これは純粋に前に移動する機能を実装する為のになってしまいますのでサーバーサイドでの処理が全く変わってきます。
これは先ほどの例と違いエンターを押すと次のページに戻るボタンを押すと前のページに移動します。
ただこの場合javascriptがoffの場合は戻るボタンが動作しません。
（javascript offの場合まで考慮されているのが素敵過ぎます）

次に例に挙げられているのは
<input value="もどる" onclick="history.back();" type="button">
<input value="上記内容で登録する" type="submit">
これだと戻る機能と戻った後に前に入力していたデータ(input要素のtype属性がpasswordやfile以外の場合)が消えずに残っているのでサーバーサイドでの処理は必要ありません。
ただ、前述の例と同じくjavascript offの場合動作せず特定の環境では入力していたデータが消えてします。
(ただ処理がすごく簡単なんで私はこの方式をいつも使います。)

で、鷹の島さんが暫定的に使ってる『戻る』機能は
<a href="hoge.cgi" tabindex="-1">
<input name="back" type="button" value="戻る" onclick='location.href="hoge.cgi"'>
</a>
<input name="send" type="submit" value="送信">
結構素敵な書き方だと思います。

ただこれだとやはり『前のページに移動する』機能の実装なので『前のページにデータを送る』機能にはなりません。

ボタンの位置は視角表現なんでcssでやってソースコード上は機能を優先すれば?
というのはどうでしょう
<input name="mode" type="submit" value="申し込み" style="float:right" />
<input name="mode" type="submit" value="もどる" style="float:left" />

こんな感じですかね？

スポンサードリンク

«角丸javascriptライブラリ『curvyCorners』を使ってみる | メイン | cssで画像をプリロードする方法（改»