マルチステップフォームマルチステップフォーム

マルチステップフォームマルチステップフォーム
歓迎🎉 このブログのcodewithrandomには、マルチステップ形式のマルチステップフォームHTML CSSを作成する方法について学びます.私たちは、この多段形式HTML CSSのために純粋なHTMLとCSSとJavaScriptを使用しています.あなたが我々のブログを楽しむことを望みます、最初に、マルチステップ形式が何であるかについて見てみましょう、そして、とき、我々は多段階フォームを使用しなければなりません.

マルチステップフォームとは何ですか?
通常、サイトがユーザから何らかのデータを望んでいるときは、必要なデータをフォームに記入するよう依頼します.時にはデータが通常よりも多い傾向があります.これは、フォームが巨大に見えるようになりますが、ユーザーがマルチステップフォームを使用してこの状況に取り組むためにフォームの長さによって脅かされたときに問題が発生します.
マルチステップフォームは、単一の長い形式が複数の部分に分割されます.
さて、マルチステップフォームを使用する際には、マルチステップ形式のHTML CSSの基本的なHTML構造から始めましょう.
マルチステップフォーム

 <section>  
  <div class="container">  
   <form>  
    <div class="step step-1 active">  
     <div class="form-group">  
      <label for="firstName">First Name</label>  
      <input type="text" id="firstName" name="first-name">  
     </div>  
     <div class="form-group">  
      <label for="lastName">Last Name</label>  
      <input type="text" id="lastName" name="last-name">  
     </div>  
     <div class="form-group">  
      <label for="nickName">Nick Name</label>  
      <input type="text" id="nickName" name="nick-name">  
     </div>  
     <button type="button" class="next-btn">Next</button>  
    </div>  
    <div class="step step-2">  
     <div class="form-group">  
      <label for="email">Email</label>  
      <input type="text" id="email" name="email">  
     </div>  
     <div class="form-group">  
      <label for="phone">Phone</label>  
      <input type="number" id="phone" name="phone-number">  
     </div>  
     <button type="button" class="previous-btn">Prev</button>  
     <button type="button" class="next-btn">Next</button>  
    </div>  
    <div class="step step-3">  
     <div class="form-group">  
      <label for="country">country</label>  
      <input type="text" id="country" name="country">  
     </div>  
     <div class="form-group">  
      <label for="city">City</label>  
      <input type="text" id="city" name="city">  
     </div>  
     <div class="form-group">  
      <label for="postCode">Post Code</label>  
      <input type="text" id="postCode" name="post-code">  
     </div>  
     <button type="button" class="previous-btn">Prev</button>  
     <button type="submit" class="submit-btn">Submit</button>  
    </div>  
   </form>  
  </div>  
 </section>  

マルチステップ形式のすべてのHTMLコードがあります、我々は彼らのステップクラスでdivを持っているので、簡単にターゲット.
マルチステップフォーム

* {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
 }  
 body {  
  font-family: "Montserrat";  
 }  
 section {  
  min-height: 100vh;  
  width: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background-color: aliceblue;  
 }  
 .container {  
  max-width: 400px;  
  width: 90%;  
  padding: 20px;  
  box-shadow: 0px 0px 20px #00000020;  
  border-radius: 8px;  
  background-color: white;  
 }  
 .step {  
  display: none;  
 }  
 .step.active {  
  display: block;  
 }  
 .form-group {  
  width: 100%;  
  margin-top: 20px;  
 }  
 .form-group input {  
  width: 100%;  
  border: 1.5px solid rgba(128, 128, 128, 0.418);  
  padding: 5px;  
  font-size: 18px;  
  margin-top: 5px;  
  border-radius: 4px;  
 }  
 button.next-btn,  
 button.previous-btn,  
 button.submit-btn {  
  float: right;  
  margin-top: 20px;  
  padding: 10px 30px;  
  border: none;  
  outline: none;  
  background-color: rgb(180, 220, 255);  
  font-family: "Montserrat";  
  font-size: 18px;  
  cursor: pointer;  
  /* text-align: right; */  
 }  
 button.previous-btn {  
  float: left;  
 }  
 button.submit-btn {  
  background-color: aquamarine;  
 }  

今私たちのCSSのセクションを完了すると、今、私たちは、複数のステップのためのJavaScript機能を必要とするクリックしてOKのステップとフォームのコンテンツの変更を2番目のステップにフォームを変更します.
マルチステップフォーム

const steps = Array.from(document.querySelectorAll("form .step"));  
 const nextBtn = document.querySelectorAll("form .next-btn");  
 const prevBtn = document.querySelectorAll("form .previous-btn");  
 const form = document.querySelector("form");  
 nextBtn.forEach((button) => {  
  button.addEventListener("click", () => {  
   changeStep("next");  
  });  
 });  
 prevBtn.forEach((button) => {  
  button.addEventListener("click", () => {  
   changeStep("prev");  
  });  
 });  
 form.addEventListener("submit", (e) => {  
  e.preventDefault();  
  const inputs = [];  
  form.querySelectorAll("input").forEach((input) => {  
   const { name, value } = input;  
   inputs.push({ name, value });  
  });  
  console.log(inputs);  
  form.reset();  
 });  
 function changeStep(btn) {  
  let index = 0;  
  const active = document.querySelector(".active");  
  index = steps.indexOf(active);  
  steps[index].classList.remove("active");  
  if (btn === "next") {  
   index++;  
  } else if (btn === "prev") {  
   index--;  
  }  
  steps[index].classList.add("active");  
 }  

Click Here For this project output
Click Here For Website and get 300 free frontend Project