広告

共有

下をクリックすると、リンクをコピー

※広告をブロックしている人は表示位置の関係で見えない可能性があります

※お使いのブラウザによってリンクをコピーできない可能性があります

共有する

📅作成日2021/11/16 更新日2021/11/16

タグ:#フォーム送信中の画面 #くるくる

コピペでできる!フォーム送信中の送信中の画面を表示する方法[javascript,HTML]

サムネイル

フォーム送信した時の、送信中の時の画面を出します。フォーム送信中のくるくるも再現します。

-----目次-----

  1. フォーム送信中の画面作成(背景を暗くする)
  2. フォーム送信中の画面作成(くるくる表示とメッセージ)
  3. フォームを送信したときに表示する
  4. どのように表示されるかのサンプル

フォーム送信中の画面作成(背景を暗くする)

まずは、背景を暗くする方法をやってみましょう!

背景を暗くするためには、divを使います。

  2.   
  3.   <div class="load" >
  4.          </div>

上のこのコードをHTMLに書き込みます。divだけだと何も動かないので、スタイルを設定していきます。

  2.   
  3.   .load{
  4.     position:fixed;
  5.     top: 50%;
  6.   left: 50%;
  7.   margin-right: -50%;
  8.   transform: translate(-50%, -50%);
  9.   z-index:20;
  10.   cursor: wait;
  11.    background-color: #333333;
  12.     height: 100%;
  13.     width:100%;
  14.     opacity:0.5;
  15.   }

これを、CSS(スタイルシート)に書き込みます。書き込む時ですが、もし、他の要素が暗くならない時は、z-indexを上げてください。もっと暗くしたい、もっと明るくしたいという方は、opacityを 上げたり下げたりしてみてください。上げたら不透明度が下がって(暗くなる)、下げたら、不透明度が上がります(明るくなる)。この背景は、カーソルを背景に持ってくると、くるくるとカーソルが回転 します。そうしたく無い場合は、(cursor:wait;)を消してください。このように自分でカスタマイズすると、いいでしょう。これで、フォーム送信するときの背景を暗くする方法です。

フォーム送信中の画面作成(くるくる表示とメッセージ)

さっきは背景を暗くしたので、次は、くるくるとメッセージを作成します!。くるくるはjavascriptを使うの？と、思う方もいるかもしれませんが、くるくるは、CSSを使えば簡単に再現できます。

  2.   
  3.   <div class="load1">
  4.     <br>
  5.    <div class="loader"></div>
  6.   <p>フォームを送信中です。少々お待ちください。</p>
  7.   </div>

これをHTMLにコピペします。これだけだと、すごくおかしくなるので、CSSで中央に文字を移動させて、背景の色も変えて、くるくるもCSSでやります。

  2.   
  3.   .loader {
  4. border: 12px solid #fafafa;
  5. border-radius: 50%;
  6. margin-left: 30%;
  7. border-top: 12px solid #3498db;
  8. width: 100px;
  9. height: 100px;
  10. animation: spin 1s linear infinite;
  11. }
  13. @keyframes spin{
  14. 0%{
  15. transform: rotate(0deg);
  16. }
  18. 100%{
  19. transform: rotate(360deg);
  20. }
  21. }
  22.   .load1{
  23.     nimation: sk-scaleout 1.0s infinite ease-in-out;
  24.     position:fixed;
  25.     top: 50%;
  26. left: 50%;
  27. margin-right: -50%;
  28. transform: translate(-50%, -50%);
  29. z-index:201;
  30.    text-align: center;
  31.    background-color: black;
  32.    color:#ffffff;
  33.     opacity:1;
  34.   }

これを、CSSにコピペしたら、ちゃんとくるくるが出てきて、メッセージもちゃんと表示されると思います。

CSSを自分でカスタマイズして、背景の色などを変えても面白いでしょう。

このままだと、フォームに送信中の時だけ表示するはずが、ページを読み込んだ時から表示されるため、javascriptでフォームが送信されたら、表示されるようにしないといけません。次はそれをやっていきま しょう。

フォームを送信したときに表示する

これは、案外簡単です。まず、このままだと、背景とメッセージとぐるぐるを、一つずつ、非表示にしないといけないので、背景とメッセージとぐるぐるをdivで一つにしてやります。

一つにするとこのようになります。↓

  2.   
  3.   <div style="display:none;" id="form11">
  4.   <div class="load" >
  5.  </div>
  6.  <div class="load1">
  7.    <br>
  8.   <div class="loader"></div>
  9.  <p>フォームを送信中です。少々お待ちください。</p>
  10. </div>
  11. </div>

このように、divで一つにしてから、divにstyle="display:none;"のしておく事で、非表示にしておきます。javascriptで表示させるためにdivにidを付け足します。idはなんでもいいですが ここでは(form11)にしておきます。

javascriptをする前に、formにonsubmit="〇〇()"を追加する必要があります。〇〇()の〇〇は今回では(loading())にします。

  2.   
  3. <form action="〇〇.php" method="post" enctype="multipart/form-data" onSubmit="loading()">

formに(onsuvmit="loading()")を付け足してください。

ここまでできたら、次は、javascriptで、formの送信ボタンが押されたら、フォーム送信中の画面を出すようにします。

  2.   
  3.   <script>
  4.   document.getElementById("form11").style.display ="none"; //一応ここでもdisplay:noneを指定しておく
  5.     function loading(){
  6.       const p1 = document.getElementById("form11");
  7.       p1.style.display ="block"; //display:block;にする
  8.     }
  9.   </script>

これを、コピペしてください。コピペしたら、実際にフォームを送信してみてください。そうすると、フォーム送信中の画面が出てきます!!

そもそも、フォーム送信中の画面なんかいるの？と思うかもしれませんが、PWA(簡単に言うと、webページアプリ化)を実装して、携帯でwebページをアプリかしたやつでフォームを送って見ると、 上の読み込みバーみたいな物が、見えないので、ついつい何回も押してしまい、フォーム送信失敗とかなってしまうので、PWAを実装している人は是非やっておいた方がいいでしょう。あと、フォーム送信中に 他のページを間違えて開くのを防止とかできます。

【PWA】実装方法とインストールボタンの作り方

どのように表示されるかのサンプル

終わり