日々の忘備録とリファレンス

PHPマニア

HTML・CSS・PHP・jQuery・Mysql・Linuxの総合情報サイト

PHPを中心にしたIT用語など、サーバー用語からTCP/IP用語まで

HTML・CSS・PHP・jQuery・Mysql・Linuxの情報サイト

+
Share
Bookmark
Follow

確認画面の種類とこだわり(JavaScriptとPHP)

確認画面とは

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

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

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

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

PHPに最適の共用サーバー

GMOの格安WordPressサーバー

ロリポップサーバー

お名前.comのサーバー

お名前サーバー

確認画面の色々

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で切り分けて表示するといった流れになります。

PHPに最適の共用サーバー

GMOの格安WordPressサーバー

ロリポップサーバー

お名前.comのサーバー

お名前サーバー

どの実装がよいのか


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

最後に・・・

今回は
  • 確認画面とは
  • 確認画面の色々
  • どの実装がよいのか
についてまとめてみました。

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

[カテゴリ]

2020年12月13日

関連記事

アフィリエイトにはカエレバやRinkerが人気商品をブログとかで紹介する時、アフィリ...

2021年03月02日

Wordpressの魅力微妙なWordpressっぽさを表現したい。いつもブログを作る時...

2020年12月16日

独自フレームワークを作った理由独自フレームワーク。いわゆるオレオレフレ...

2020年12月06日

Copyright© 2019-2021 php-mania.com All Rights Reserbed.

当サイトに掲載している文章、画像などの無断転載を禁止いたします。