Q&A
「可能です」という回答でよろしいのでしょうか？
なにがわからないのかわからない、という状態に見えてしまいましたので、ご不明の点を提示していただいた方がいいかと思いました。
問い合わせフォームをhtmlで作成しているのですが、googleフォームみたいに、セクションを分けてフォームを作りたいのですがどのようにすればできるでしょうか
===================
セクション1
Q1xxxxx
Q2xxxxx
次へ ←をクリックすると、セクション2へ
===================
セクション2
Q3xxxxxx
Q4xxxxxx
===================
上記みたいなイメージで、最初はセクション1しか表示されておらず、
「次へ」をクリックすると、ページ遷移させずに、
セクション2の質問が表示されるようにしたいです。
ご丁寧にありがとうございます。
正直、初心者なものでどういうコードを記載すればいいかわからずという状態です。。
formと、labelで必要な枠は作れるのですが、セクションを分けるような表示の仕方といいますか、やり方をどうすれば実現できるか知りたいです。。。
考え方とキーワードのみでも良いのでしょうか。データの流れ方にもよりますし、実現方法もたくさんあるのでコードありきではなく、データの流れかたと手順(要は設計部分)をもう少し具体的にかためられた方が見えてくるキーワードもあるかと思います
考え方とキーワードのみでも頂けますと非常に助かります！！！
初心者で、セクションをわけてgoogleフォームと同じようにしたいぐらいしか考えられてないので、どうかよろしくお願いします。
では、質問を編集してそのように記載しておいてください。「可能ですか？」のままなので。
先に言っておきますが、現段階では質問者さんが決めなければならない部分、考えなければならない部分が非常に多いです。そのあたりはご認識くださいね
申し訳ございません。丁寧にありがとうございます！
学んでいきたいので、どうか宜しくお願いします
回答3件
0
ベストアンサー
やり方はたくさんあります。
ただ、それは「どのようにデータを持ちたいか・持たせたいか」「どのように見せたいか」にもよります。
その部分は仕様なので考えていただきたい部分です。
「Googleフォームのような」というと、セクションと項目は固定ではなく動的になります。
動的になるということは、データベースに情報を持つのが最も一般的と思います。
つまりまずやるべきは作りたい機能に必要なデータの体系を考えること。
どのようにデータを持てば動的にセクションと項目を持つようににできるか。
「1対多」「多対多」などデータの関連性の持ち方を習得する必要があります。
ここは「マスタ」と呼ばれるデータの呼び方になります。
また、実際に入力された情報を格納するデータも必要になるかもしれませんね。
まあ送りっぱなしなのであればそれも不要かもしれませんが、履歴として残したいのであればそれも保存する必要がありますね。
要件によって適宜データの持ち方を考えてください。
というところはあくまで「裏側」のことです。
データの持ち方が決まればあとは表の話ですので別々に作ることも出来ます。
（実際現場ではモックという形で静的htmlで画面イメージとクライアント側の動作イメージを作ります）
「ページ遷移」って結構曖昧な概念だったりします。
それによって実現方法がたくさん考えられるわけです。
ひとつめ。
phpとのことで、フォーム送信のことはある程度理解されている前提で書きますが、
form送信する場合に「自身に対してPOSTする」ということがあります。それを「ページ遷移」とするかどうかにもよるわけです。
その「セクション切り分け」をGETとPOSTを組み合わせて作るのが1つ。
つまりformの送信先を自身＋セクション番号とすること です。
すると、セクション番号をGETで渡して、それによって取得するセクションの項目を決めるわけですね。
POSTで項目で選択した情報を送信するわけですね。
ただ、「戻る」必要があるかもしれませんのでセッションは覚えておいたほうが良いです。
最終的には全項目を送信するわけですし、隠し要素（input type=hidden）でずっとHTML内に埋め込むよりはセッションのほうが良いかなと（送信後、セッションを破棄する必要があります）
ふたつめ。
セクション毎に項目をおさめるHTMLを最初から用意しておき、JavaScriptで「次へ」「前へ」のボタンで「表示・非表示」のみを切り替える。
これは単純にするならCSSのdisplayの指定をblock/noneを切り替えるということになります。
もちろんあとは動きの問題なのでスライドするなりアニメーションつけるなりはご自由に。
問い合わせ項目の送信は全て一気に行います。
みっつめ。
非同期通信を行い、セクション・問い合わせ項目を取得してきてセクションのグループをごそっとJavaScriptで入れ替えます。
すべて入れ替えるため、問い合わせ項目で選択した項目をどこかに保持しておく必要があります。PHPでサーバー側にセッションで持っておくか、
クライアント側でWebStorage(LocalStorage/SessionStorage)に持っておいて送信時はそこから取得してきてもいいかもしれません。
いずれにしても送信項目についてはJavaScriptで作って送信する必要があります。
ざっと思いついたのはこれくらい。
やりやすいのものから対応してみてください。
いずれにしても実際に作ってくためには「項目をどう持つか」「データをどう流すか・データを持つか」を考えるのは共通です。
投稿2019/04/05 13:39
総合スコア80850
0
phpの場合htmlは、phpで生成してるのですね？
だとしたら、セッション１からセッション２はそれぞれhtml（phpで作成する）を用意し、１から２へ表示するときに、１pxも狂わず調整して表示するとそのように表示されます。
動きは、１から２へ画面遷移しているが見た感じは高速で表示されるので変化しているようにみえているだけです。
投稿2019/04/05 13:29
総合スコア341
0
JavaScript（またはjQuery）、HTML5/CSS3、CSSアニメーションなどを学んでください。インタラクティブな動きはほとんどこれで作れるようになります。
投稿2019/04/05 13:16
総合スコア1899
あなたの回答
tips
プレビュー
