에서 다단계 등록을 생성합니다.

등록 또는 다른 양식을 만들었을 수 있습니다. 그러나 때로는 양식이 장치 뷰포트보다 클 수 있습니다. 이 경우 표시가 매우 나쁩니다. 따라서 다단계 양식이라는 양식을 여러 부분으로 나누어야 합니다.

1 단계


2 단계


3단계


다단계 양식은 항상 사용자에게 친숙합니다.

이것은 매우 쉽습니다. 아래의 코드를 따르십시오. (form.html, style.css 및 script.js)

기울임꼴 여기서도 부트스트랩 3을 사용합니다.

form.html

 <div class="wrapper">
        <form action="" method="POST" role="form">
            <div class="step step-1 active">
                <legend>Your personal details</legend>
                <div class="form-group">
                    <label for="fname">First Name</label>
                    <input type="text" name="fname" for="fname" />
                </div>
                <div class="form-group">
                    <label for="lname">Last Name</label>
                    <input type="text" name="lname" for="lname" />
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" name="email" for="email" />
                </div>
                <div class="form-group">
                    <label for="phone">Phone</label>
                    <input type="phone" name="phone" for="phone" />
                </div>

                <button type="button" value="next" class="nxt-btn btn-warning">Next</button>

            </div>
            <div class="step step-2 ">
                <legend>Your address</legend>
                <div class="form-group">
                    <label for="vname">Vilage</label>
                    <input type="text" name="vname" for="vname" />
                </div>
                <div class="form-group">
                    <label for="post">Post office</label>
                    <input type="text" name="post" for="post" />
                </div>
                <div class="form-group">
                    <label for="thana">Thana</label>
                    <input type="text" name="thana" for="thana" />
                </div>
                <div class="form-group">
                    <label for="district">District</label>
                    <input type="text" name="district" for="district" />
                </div>

                <button type="button" value="prew" class="pre-btn btn-danger">Previous</button>
                <button type="button" value="next" class="nxt-btn btn-warning">Next</button>
            </div>
            <div class="step step-3">
                <legend>Your Identity</legend>
                <div class="form-group">
                    <label for="image">Photo</label>
                    <input type="file" name="image" for="image" />
                </div>
                <div class="form-group">
                    <label for="nid">NID</label>
                    <input type="text" name="nid" for="nid" />
                </div>

                <button type="button" value="prew" class="pre-btn btn-danger">Previous</button>
                <button type="button" value="submit" class="submit-btn btn-success">Submit</button>
            </div>

        </form>
    </div>

스타일.css

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Georgia, "Times New Roman", Times, serif;
}

.wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: powderblue;
}

.step { 
    display: none; 
}

.step.active {
  display: block;
  height: 500px;
}
.step {
  clear: both;
}

.form-group {
  width: 100%;
  margin-top: 10px;
}

.form-group input {
  width: 100%;
  border: 1.5px solid rgba(5, 2, 2, 0.4);
  padding: 0px;
  font-size: 18px;
  margin-bottom: 8px;
  border-radius: 4px;
}

button.nxt-btn,
button.pre-btn,
button.submit-btn {
  margin-top: 20px;
  padding: 3px 15px;
  border: none;
  outline: none;
  font-size: 18px;
  cursor: pointer;
}
button.pre-btn {
  float: left;
}
button.nxt-btn,
button.submit-btn {
  float: right;
}

*script.js

const steps = [...document.querySelectorAll(".step")];
const btnList = document.querySelectorAll("button");
const form = document.querySelector("form");


btnList.forEach((button) => {
    button.addEventListener("click", (e) => {
        let btnValue = e.target.value;
        let index = 0;
        let active = document.querySelector("form .step.active");
        index = steps.indexOf(active);
        steps[index].classList.remove("active");
        btnValue === "next"
            ? index++
            : btnValue === "prew"
                ? index--
                : alert("Form submited");
        steps[index].classList.add("active");

    });
});