作成日:2018-05-07, 更新日:2022-02-08
ベストなform投稿
まず何をもってベストなのかが分からない・・・分からないが希望は下記のような感じ。
・作り手にとって、作る手間が少ない
・作り手にとって、メンテナンスがラク
・ユーザーにとって、使いやすい
※「メンテナンス」は例えば、運用開始後、任意のタイミングで「formの項目を増減する」ということ。
想定しているform投稿
・問合せフォーム：問合せのようなform
・登録フォーム：会員情報の登録、編集のようなform
ページ構成
ページ構成は基本、下記の3種類。
・入力画面
・確認画面
・保存、その後の画面
通常は「入力→確認→保存」の流れ。
「入力→確認→入力→確認→保存」のように確認画面から入力に戻ることもある。
また「入力→確認」のように途中で終了というパターンもある。
入力画面
考えられるパターンや問題は下記あたり。
・登録フォームは「新規登録」と「編集」の２つあるが、問合せフォームは１つだけ。
・確認後に修正で戻ってくることもある。
・画像を含めたい
・郵便番号の検索を含めたい
・別から読み込んだ情報（役職やカテゴリー、タグなど）を含めたい
ページのタイプ
入力フォーム自体は下記の２タイプがあると思う。
・専用のページを作る
・ポップアップ（モーダルウィンドウ）を作る
入力項目が少ない、検索フォームは含めないなら「ポップアップ（モーダルウィンドウ）」でも問題無し。
※項目が少なくても「確認画面」の問題で「ポップアップ（モーダルウィンドウ）」は避けたほうがいいかもしれない。
画像や別から読み込んだ情報（役職やカテゴリー、タグなど）を含める場合は・・・状況によっては「ポップアップ（モーダルウィンドウ）」は避けたほうがいい。
確認画面
考えられるパターンは下記あたり。
・不要：確認無しで即保存させる
・入力画面で兼用させる
・専用にページを用意
不要な場合
何も考えなくていいからラク。
ただ、確認できないはユーザーにとってどうなんだろうか？という問題あり。
問合せフォームだと、後で変更ってワケにもいかないだろうから、確認画面は必要だと思う
入力画面で兼用させる
面倒だから避けたい方法。
やり方としては下記のような感じ
<form id="wrapInput">
各入力フォーム
<button id="btnConfirm">確認</button>
</form>
<div id="wrapConfirm" style="display:none">
入力したデータ
<button id="btnEdit">修正</button>
<button id="btnSave">保存</button>
</div>
<script>
$('#btnConfirm').on('click', function(){
～ 「id="wrapConfirm"」の中に入力されたデータを記載させる ～
$('#wrapConfirm').css('display', ''); // 表示
$('#wrapInput').css('display', 'none'); // 非表示
});
$('#btnEdit').on('click', function(){
$('#wrapConfirm').css('display', 'none'); // 非表示
$('#wrapInput').css('display', ''); // 表示
});
$('#btnSave').on('click', function(){
～ 保存させる ～
});
</script>
コレのいいとこは入力データが残るから、処理がラク。
専用にページを用意
入力項目が多くなってもページが別だと見やすい。
ただ、前のページに戻る、保存させるというときに入力データをどういう風に扱うのかが問題。
ブラウザの「戻る」ボタンも考慮する必要あるし・・・。
あと、formでファイルを送ってもらうときの対応も考慮する
保存、その後の画面
いわゆるサンキューページで、考えられるパターンは下記あたり。
・専用にページを用意
・任意のページにメッセージを表示