HTML/CSS/JavaScript를 사용한 멋진 스테퍼 양식

my blog에 원래 게시됨

스테퍼 또는 다단계 양식은 긴 양식을 처리할 때 편리한 기능입니다. 보다 사용자 친화적인 양식 형식으로 사용자 경험을 향상시킵니다. 이 자습서에서는 HTML, CSS 및 JavaScript를 사용하여 스테퍼 양식을 만듭니다.

Codepen에서 실시간으로 확인하실 수 있습니다 : Stepper Form

시작하자!

마크업

보시다시피 HTML 파일은 비교적 간단합니다.

    <main>
      <div class="stepper">
        <div class="step--1 step-active">Step 1</div>
        <div class="step--2">Step 2</div>
        <div class="step--3">Step 3</div>
        <div class="step--4">Finish</div>
      </div>
      <form class="form form-active">
        <div class="form--header-container">
          <h1 class="form--header-title">
            Personal Info
          </h1>

          <p class="form--header-text">
            Tell us more about you.
          </p>
        </div>
        <input type="text" placeholder="Name" />
        <input type="text" placeholder="Email" />
        <input type="text" placeholder="Password" />
        <button class="form__btn" id="btn-1">Next</button>
      </form>
      <form class="form">
        <div class="form--header-container">
          <h1 class="form--header-title">
            Company Info
          </h1>

          <p class="form--header-text">
            Tell us more about your company.
          </p>
        </div>

        <input type="text" placeholder="Company Name" />
        <input type="text" placeholder="Job title" />
        <input type="text" placeholder="Location" />
        <button class="form__btn" id="btn-2-prev">Previous</button>
        <button class="form__btn" id="btn-2-next">Next</button>
      </form>
      <form class="form">
        <div class="form--header-container">
          <h1 class="form--header-title">
            Social account
          </h1>

          <p class="form--header-text">
            Tell us more about your social account.
          </p>
        </div>
        <input type="text" placeholder="Linkedin" />
        <input type="text" placeholder="Twitter" />
        <input type="text" placeholder="Github" />
        <button class="form__btn" id="btn-3">Submit</button>
      </form>
      <div class="form--message"></div>
    </main>

main 태그 외에 스테퍼 요소를 포함하는 div도 정의합니다. 그런 다음 다른 버튼forms과 함께 3개id를 사용하여 곧 JavaScript의 도움으로 스테퍼 효과를 만듭니다.

이를 통해 이제 CSS로 프로젝트 스타일을 지정할 수 있습니다.

스타일링

여기에서 몇 가지 재설정으로 시작한 다음 font-family 태그에 대한 background-color 및 body 속성을 설정합니다.

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #f5f6f7;
  font-family: 'Nunito', sans-serif;
}

main {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

다음으로 flex 태그의 main 값을 사용하여 body 태그를 기준으로 요소를 중앙에 배치합니다.

.stepper {
  width: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 5%;
}

.step--1,
.step--2,
.step--3,
.step--4 {
  width: 5rem;
  padding: 0.5rem 0;
  background: #fff;
  color: #666;
  text-align: center;
}
.step--1,
.step--2,
.step--3 {
  border-right: 1px solid #666;
}

Stepper 요소의 경우 CSS flexbox를 사용하여 가로로 정렬한 다음 해당 클래스 이름을 사용하여 스타일을 추가합니다.

.form {
  background: #fff;
  text-align: center;
  position: absolute;
  width: 25rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
  display: none;
  border-radius: 1rem;
  overflow: hidden;
}
.form--header-container {
  background: linear-gradient(to right, rgb(51, 51, 51), #919191);
  color: #fff;
  height: 6rem;
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.form--header-title {
  font-size: 1.4rem;
}

.form--header-text {
  padding: 0.5rem 0;
}

input[type='text'] {
  padding: 0.8rem;
  margin: auto;
  margin-top: 0.5rem;
  width: 20rem;
  display: block;
  border-radius: 0.5rem;
  outline: none;
  border: 1px solid #bdbdbb;
}

.form__btn {
  background: #333;
  color: #fff;
  outline: none;
  border: none;
  padding: 0.5rem 0.7rem;
  width: 7rem;
  margin: 1rem auto;
  border-radius: 0.9rem;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.form--message-text {
  width: 25rem;
  background: #fff;
  color: #444;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 1.4rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
  animation: fadeIn 0.8s;
  border-radius: 1rem;
}

처음에는 세 가지 양식을 모두 숨길 것입니다. 클래스active class가 포함된 양식만 표시됩니다.
form--header-container 클래스에서 linear-gradient를 사용하여 양식 머리글의 스타일을 지정합니다.

다음으로 form--message-text 클래스에 animation 속성을 추가하여 양식이 성공적으로 제출될 때 페이드 인 효과를 줍니다.

.form-active {
  z-index: 1000;
  display: block;
}
.form-active-animate {
  animation: moveRight 1s;
}
.form-inactive {
  display: block;
  animation: moveLeft 1s;
}

.step-active {
  background: #666;
  color: #fff;
  border: 1px solid #666;
}

form-active 클래스를 사용하여 현재 양식을 표시합니다. 또한 다른 요소 위에 양식을 배치하는 속성z-index도 있습니다.

다음으로 form-active-animate 클래스를 사용하여 왼쪽에서 오른쪽으로 멋진 애니메이션 입구를 만듭니다. 이전 양식을 숨기는 데 도움이 되는 클래스 이름form-inactive도 있습니다.

@keyframes moveRight {
  0% {
    transform: translateX(-27rem) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateX(0rem) scale(1);
    opacity: 1;
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(0rem) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(27rem) scale(0.9);
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

여기에서 볼 수 있듯이 keyframes에 의존하여 애니메이션을 만듭니다.

첫 번째 애니메이션moveRight은 transform 속성을 사용하여 요소를 왼쪽에서 오른쪽으로 이동합니다.

두 번째 애니메이션의 경우 요소가 오른쪽에서 더 많이 이동한다는 점을 제외하고는 상대적으로 동일한 프로세스입니다.

마지막 애니메이션fadeIn 은 요소가 표시될 때 페이드 인 효과를 시작합니다.

자바스크립트

여기에서 볼 수 있듯이 클릭 이벤트를 수신한 다음 gotoNextForm 함수를 사용하여 처리합니다.

const formBtn1 = document.querySelector('#btn-1');
const formBtnPrev2 = document.querySelector('#btn-2-prev');
const formBtnNext2 = document.querySelector('#btn-2-next');
const formBtn3 = document.querySelector('#btn-3');

DOM과 상호 작용하려면 querySelector 메서드를 사용하여 모든 양식 버튼을 선택해야 합니다.

// Button listener of form 1
formBtn1.addEventListener('click', function(e) {
  gotoNextForm(formBtn1, formBtnNext2, 1, 2);
  e.preventDefault();
});

// Next button listener of form 2
formBtnNext2.addEventListener('click', function(e) {
  gotoNextForm(formBtnNext2, formBtn3, 2, 3);
  e.preventDefault();
});

// Previous button listener of form 2
formBtnPrev2.addEventListener('click', function(e) {
  gotoNextForm(formBtnNext2, formBtn1, 2, 1);
  e.preventDefault();
});

// Button listener of form 3
formBtn3.addEventListener('click', function(e) {
  document.querySelector(`.step--3`).classList.remove('step-active');
  document.querySelector(`.step--4`).classList.add('step-active');
  formBtn3.parentElement.style.display = 'none';
  document.querySelector('.form--message').innerHTML = `
   <h1 class="form--message-text">Your account is successfully created </h1>
   `;
  e.preventDefault();
});

여기서는 양식 ID를 매개변수로 전달한 다음 이벤트에서 메서드preventDefault()를 사용하여 페이지가 다시 로드되지 않도록 합니다.

수신기formBtn3는 사용자에게 메시지를 표시해야 하기 때문에 약간 다릅니다. 그래서 innerHTML를 사용하여 콘텐츠를 추가합니다.

const gotoNextForm = (prev, next, stepPrev, stepNext) => {
  // Get form through the button
  const prevForm = prev.parentElement;
  const nextForm = next.parentElement;
  const nextStep = document.querySelector(`.step--${stepNext}`);
  const prevStep = document.querySelector(`.step--${stepPrev}`);
  // Add active/inactive classes to both previous and next form
  nextForm.classList.add('form-active');
  nextForm.classList.add('form-active-animate');
  prevForm.classList.add('form-inactive');
  // Change the active step element
  prevStep.classList.remove('step-active');
  nextStep.classList.add('step-active');
  // Remove active/inactive classes to both previous an next form
  setTimeout(() => {
    prevForm.classList.remove('form-active');
    prevForm.classList.remove('form-inactive');
    nextForm.classList.remove('form-active-animate');
  }, 1000);
};

여기에서 prevForm 및 nextForm 변수 모두에서 parentElement 속성을 사용하여 DOM을 순회하여 form 요소를 선택합니다.

다음으로 변수를 사용하여 스테퍼 요소에서 양식 단계를 선택합니다.

그런 다음 멋진 애니메이션 효과를 내기 위해 클래스form-active 및 form-active-animate를 다음 양식 요소에 추가합니다.

다음으로 setTimeout()을 사용하여 1초 후에 양식에서 form-active , form-inactive 및 form-active-animate 클래스를 제거합니다.



엄청난! HTML, CSS 및 JavaScript를 사용하여 Awesome Stepper Form 작성을 완료했습니다.

저를 팔로우하시면 새로운 기사가 ​​게시될 때 알림을 받으실 수 있습니다.

읽어 주셔서 감사합니다!



BLOG
NEWSLETTER
GITHUB

CODEPEN