作成日:2018-05-07, 更新日:2022-02-08
ベストなform投稿
まず何をもってベストなのかが分からない・・・分からないが希望は下記のような感じ。
・作り手にとって、作る手間が少ない
・作り手にとって、メンテナンスがラク
・ユーザーにとって、使いやすい
※「メンテナンス」は例えば、運用開始後、任意のタイミングで「formの項目を増減する」ということ。
想定しているform投稿
・問合せフォーム:問合せのようなform
・登録フォーム:会員情報の登録、編集のようなform
ページ構成
ページ構成は基本、下記の3種類。
・入力画面
・確認画面
・保存、その後の画面
通常は「入力→確認→保存」の流れ。
「入力→確認→入力→確認→保存」のように確認画面から入力に戻ることもある。
また「入力→確認」のように途中で終了というパターンもある。
入力画面
考えられるパターンや問題は下記あたり。
・登録フォームは「新規登録」と「編集」の2つあるが、問合せフォームは1つだけ。
・確認後に修正で戻ってくることもある。
・画像を含めたい
・郵便番号の検索を含めたい
・別から読み込んだ情報(役職やカテゴリー、タグなど)を含めたい
ページのタイプ
入力フォーム自体は下記の2タイプがあると思う。
・専用のページを作る
・ポップアップ(モーダルウィンドウ)を作る
入力項目が少ない、検索フォームは含めないなら「ポップアップ(モーダルウィンドウ)」でも問題無し。
※項目が少なくても「確認画面」の問題で「ポップアップ(モーダルウィンドウ)」は避けたほうがいいかもしれない。
画像や別から読み込んだ情報(役職やカテゴリー、タグなど)を含める場合は・・・状況によっては「ポップアップ(モーダルウィンドウ)」は避けたほうがいい。
確認画面
考えられるパターンは下記あたり。
・不要:確認無しで即保存させる
・入力画面で兼用させる
・専用にページを用意
不要な場合
何も考えなくていいからラク。
ただ、確認できないはユーザーにとってどうなんだろうか?という問題あり。
問合せフォームだと、後で変更ってワケにもいかないだろうから、確認画面は必要だと思う
入力画面で兼用させる
面倒だから避けたい方法。
やり方としては下記のような感じ
<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でファイルを送ってもらうときの対応も考慮する
保存、その後の画面
いわゆるサンキューページで、考えられるパターンは下記あたり。
・専用にページを用意
・任意のページにメッセージを表示