다단계 양식 HTML Css Javascript 생성(소스 코드)

이 블로그에서 codewithrandom에 오신 것을 환영합니다. 다단계 양식을 만드는 방법에 대해 알아봅니다. 이 다단계 양식에 순수 HTML 및 CSS와 자바스크립트를 사용할 것입니다. 블로그를 즐기시기 바랍니다. 먼저 다단계 양식이 무엇이며 언제 다단계 양식을 사용해야 하는지 살펴보겠습니다.

다단계 양식이란 무엇이며 언제 사용해야합니까?

일반적으로 사이트가 사용자로부터 일부 데이터를 원할 때 필요한 데이터로 양식을 작성하도록 요청합니다. 때때로 데이터가 평소보다 더 많은 경향이 있어 그 대가로 양식이 거대해 보이지만 사용자가 이 상황을 해결하기 위해 양식 길이에 겁을 먹을 때 문제가 발생합니다. 우리는 다단계 양식을 사용합니다.

다단계 양식

다단계 양식은 여러 조각으로 나뉜 하나의 긴 양식일 뿐입니다.

이제 다단계 양식을 언제 어떻게 사용해야 하는지에 대한 기본 아이디어를 얻었으므로 다단계 양식 HTML CSS의 기본 HTML 구조부터 시작하겠습니다.

다단계 양식용 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가 있으므로 쉽게 대상을 지정할 수 있습니다.

이제 CSS 없이 출력을 볼 수 있으며 HTML 다중 단계 양식에 대해 CSS를 작성합니다.

HTML 다단계 양식의 출력



다단계 양식용 CSS 코드

* {
    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 기능만 필요합니다. 다음은 CSS로 업데이트된 출력입니다.







*다단계 형식을 위한 자바스크립트 코드 *

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");  
 }  

이제 다단계 양식에 대한 모든 HTML CSS JavaScript 코딩을 완료했습니다. 하단에서 동영상을 출력할 수 있습니다.

full article link

이 포스트에서는 HTML css와 javascript의 간단한 코딩으로 다단계 양식을 만드는 방법을 배웁니다. 우리가 실수를 했거나 혼란을 주었다면 댓글을 남겨주세요. 답글을 달아주시거나 쉬운 학습을 도와주세요.

작성 – codewithrandom/Anki

다단계 양식 FAQ

일부 관련 주제 -

create-header-html-create-header-html-css

make-calendar-using-html-css-javascript-

music-player-project-in-html-and-css

simple-css-waves-wave-background-css-pure-css-wave

add-to-cart-button-animation-add-to-cart-button-html-css-javascript