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

2006-06-16 (Fri)

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

はてながグリーン電力化とか良くわからない事を始めたので、試しにTシャツの注文ボタンを押したのですが、この時フォーム内の「戻る」ボタンについて気が付いた事があったので、その事について。

フォームには一つ前の画面に戻るための「戻る」ボタンと、次の画面へ進むための「次へ」とか「送信」とかいうボタンが置いてある事が多いと思うのですけど、デザイン上とか何とかとにかく、「戻る」が左にあって「次へ」が右にある場合って HTML の記述ってどうすれば良いか悩みませんか？

「次へ」は当然 submit ボタンなんですけど、「戻る」も submit ボタンにしてしまうと、入力フィールド上でエンターキーを押した場合に「戻る｣ボタンを押した事になってしまう。*1なんとなく「エンター＝進む」みたいな印象があるので、エンターキーで戻ってしまうってのはどうしても変だと感じるので嫌なのだが、これを解決する為のうまい記述方法もないので悩ましい所。「戻る」ボタンが右側にあればこんな悩みもオサラバなんですが、なかなかそういう訳にもいかなくて。*2

それで、気付いた事って言うのは、はてなの中で「戻る」機能を二種類見掛けたんです。

まず一個目はグリーン電力化のTシャツを注文をする時に、住所を入力して「申し込み」ボタンを押すと今度はパスワードの入力画面になるのですが、ここにある「戻る」ボタンは submit ボタンになっています。

今ポイントが足りなくて当該画面を見る事が出来ないんだけど、確かこんな感じ。

<input name="mode" type="submit" value="もどる">
<input name="mode" type="submit" value="申し込み">

プログラムには押したボタンの情報が送られるので、mode の値が「もどる」だったら一個前の画面を表示すれば良いし「申し込み」だったら先へ進めば良い。正統派(?)な作り。

ただし、前述したようにこのフォームは入力フィールド中でエンターキーを押すと「もどる」ボタンを押した事になってしまって一つ前の画面に戻ってしまう。先へ進むには「申し込み」ボタンを押さないといけない。

次、Tシャツを買える程にはポイントを持っていなかったので、ポイントを購入したんですけど、その時見つけたこれ。クレジットカードの購入で、金額を選択して次へ進むとカード番号やらを入力するフォームに移行するんだけど、ここのフォームはこんな感じ。

<input value="もどる" onclick="location.href='./credit'" type="button">
<input value="この内容でポイントを購入する" type="submit">

ここはエンターキーで先へ進めるし、「もどる」でもちゃんと戻れる。ただし、見てわかる通り JavaScript が必須なので環境によっては戻れない人が居る。

さらにはてなの中を調べていたら、ユーザ登録フォームでもまた別種の「戻る」機能を発見した。

<input value="もどる" onclick="history.back();" type="button">
<input value="上記内容で登録する" type="submit">

ここも JavaScript 必須。

ちなみに history.back() って入力内容が失われることがあるので何とかヤメテ欲しい所。あと関係無いけど、IE だと「セキュリティで保護されてない項目がある」っていう警告が表示されるらしいから何とかして頂きたく。

で、まぁたまたまはてなで見付けたからはてなのばっかり紹介していますが、多分どこも似たようなもんだと思う。自分も戻る機能に関してはこれだという答えが出ていない状況であって、今は結構変な風にしているんですが、最後にこれを紹介。

<a href="hoge.cgi" tabindex="-1">
<input name="back" type="button" value="戻る" onclick='location.href="hoge.cgi"'>
</a>
<input name="send" type="submit" value="送信">

JavaScript 非対応環境向けにアンカータグを入れただけなんですけどね。ブラウザによってはタブキーによるフォーカスが意図と反するものになる可能性があるので、tabindex を指定してます。これが (X)HTML 的に正しいとか正しくないとかは知らないけど、一応期待した通りに動いてるようです。

でも、正直これもちょっと気持ち悪い書き方ですよねえ。

なんかうまい方法を実現している人は居ませんでしょうか。

そういえばデスクトップアプリとかって、エンターキーを押した場合に押されるボタンに破線がついていますね。この辺りをうまうゴニョゴニョ真似すれば、使いやすいものが出来そうか？？