確認画面とは

form機能によく付随される確認画面。

確認画面は、お問い合わせ画面や管理画面などによく実装されてますね。

ユーザーからしてみると、いきなり送信や完了画面が表示されると焦るので、確認画面って必要ですよね。

その確認画面の実装、色々方法はありますが、その方法と評価についてまとめてみました。

確認画面の色々

JavaScriptでの実装

まずはJavaScriptでの実装。
「送信」ボタンをクリックすると、アラートで出るタイプの確認画面です。


こんな画面ですね。
たしかに確認は出来ますが、ちょっと簡易的過ぎて、あまりプロフェッショナルではないですね。

でも、未だにこういう感じのJavaScriptで作った確認画面を持つサイトもありますし、企業サイトとかでも結構見受けられます。

この方法は、JavaScriptのonclickで

  <script>
  window.confirm('この内容で送信します。よろしいですか？');
  </script>

ですぐに実装出来ます。

ただ、近年ではJavaScriptで実装する方法もありますが、アラートで表示する方法は、レガシーなやり方なイメージがあります。

では、現代ではどうするのか？
それは、アラートではなく、バリデートをして、formのところに表示させるわけです。



こんな感じです。
これはJavaScriptでもPHPでも実装出来ます。

JavaScriptはブラウザ上だけで検証し、PHPの場合は一旦サーバーにデータを送ってサーバー側で検証して結果を返す形になります。

しかしJavaScriptだと、リアルタイムに検証することも出来るので、よりユーザーに優しくなります。

例えば上記ですと、名前を入力したら自動でエラーが消える、メールアドレスをきちんとメールアドレスの形式で入力したらエラーが消えるとかです。

また、写真のようにエラー対象の入力項目を赤くする事もユーザーに優しいと思います。

PHPでの実装

JavaScriptでの実装は、JavaScriptでバリデートしてましたが、PHPの場合は、一旦サーバー側にデータを持っていき、サーバー側でバリデートすることになりますので、リアルタイムにはなりませんが、PHPでも上記のようなformの冒頭などに表示させたり、入力項目を赤く表示させたりすることが出来ます。

確認画面に関しては、JavaScriptの場合は基本同一ページで処理することになりますが、PHPの場合はページURLを変更する事もできます。

別ページでの実装

例えば、入力画面は、

sample.com/entry.php

とすると、確認画面は、

sample.com/confirm.php

送信完了画面は、

sample.com/complete.php

みたいな感じです。
これはformタグのaction属性に、それぞれの異なるファイルを指定することで実現可能です。

同ページでの実装

PHPでも逆に全て

sample.com/entry.php

で処理することも可能です。

これはformタグのaction属性には同ページを指定して、name値の判別でPHPで切り分けて表示するといった流れになります。

どの実装がよいのか

一概には言えませんが、JavaScriptのアラートのような簡易的なフォームよりかは、きちんとエラーメッセージを表示したり、エラー箇所を目立たせたりすると、ユーザーも分かりやすいのではないかなと思います。

最後に・・・

今回は

• 確認画面とは
• 確認画面の色々
• どの実装がよいのか

についてまとめてみました。

最後までお読み頂きありがとうございました。