더 나은 사용자 경험을위한 효과적인 멀티 스텝 양식 만들기 – Smashing Magazine

And from there, go ahead and create a style.css 내가 접한 다음 스타일로 파일.

  
View CSS
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  main {
    padding: 0 30px;
  }
  h1 {
    font-size: 1.8rem;
    text-align: center;
  }
  .stepper {
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
  }
  form {
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
    padding: 12px;
  }
  input,
  textarea,
  select {
    outline: none;
  }
  input:valid,
  textarea:valid,
  select:valid,
  input:focus:valid,
  textarea:focus:valid,
  select:focus:valid {
    border-color: green;
  }
  input:focus:invalid,
  textarea:focus:invalid,
  select:focus:invalid {
    border: 1px solid red;
  }

내비게이션 및 유효성 검사

다단계 양식으로 사용자 경험을 망치는 쉬운 방법은 사용자가 양식의 마지막 단계에 도달 할 때까지 기다리는 것입니다. 양식의 각 단계는 다음 단계로 넘어 가기 전에 오류에 대해 검증되어야하며, 사용자가 잘못된 점과 수정 방법을 이해할 수 있도록 설명 오류 메시지를 표시해야합니다.

이제 볼 수있는 우리 양식의 유일한 부분은 첫 번째 단계입니다. 양식을 작성하려면 사용자는 다른 단계로 이동할 수 있어야합니다. 우리는 여러 버튼을 사용하여 이것을 끌어 낼 것입니다. 첫 번째 단계는 다음 단추. 두 번째와 세 번째 단계는 둘 다 이전의 그리고 a 다음 버튼, 네 번째 단계는 이전의 그리고 a 제출하다 단추.

  
  

    
    Next
  

  
  

    
    Previous
    Next
  

  
  

    
    Previous
    Next
  

  
  

    
    Previous
    Submit Application
  

알아채다: 우리는 추가했습니다 onclick 에 대한 속성 이전의 그리고 다음 해당 자바 스크립트 기능에 연결하는 버튼 : previousStep() 그리고 nextStep().

“다음”버튼

그만큼 nextStep() 기능은 다음 버튼에 연결됩니다. 사용자가 다음 버튼을 클릭 할 때마다 nextStep() 기능은 먼저 다음 단계로 넘어 가기 전에 사용자가있는 모든 단계에 대한 모든 필드가 올바르게 작성되었는지 확인합니다. 필드가 올바르게 채워지지 않은 경우 몇 가지 오류 메시지가 표시되어 사용자에게 잘못된 일을했음을 알리고 오류를 제거하기 위해 수행해야 할 작업을 알려줍니다.

우리가 구현하기 전에 nextStep 함수, 함수에 필요하기 때문에 정의해야 할 특정 변수가 있습니다. 먼저, 우리는 DOM의 입력 필드가 필요하므로 확인 필드가 확인하여 유효한 지 확인 할 수 있습니다.

// Step 1 fields
const name = document.getElementById("name");
const email = document.getElementById("email");
const phone = document.getElementById("phone");

// Step 2 fields
const company = document.getElementById("company");
const jobTitle = document.getElementById("jobTitle");
const yearsExperience = document.getElementById("yearsExperience");

// Step 3 fields
const skills = document.getElementById("skills");
const highestDegree = document.getElementById("highestDegree");

그런 다음 오류 메시지를 저장하려면 배열이 필요합니다.

let errorMsgs = [];

또한 DOM에는 해당 오류 메시지가 생성 된 후에 해당 오류 메시지를 삽입 할 수있는 요소가 필요합니다. 이 요소는 마지막 HTML에 배치해야합니다. fieldset 마감 태그 :

위를 추가하십시오 div 다음 줄을 사용하여 JavaScript 코드로 :

const errorMessagesDiv = document.getElementById("errorMessages");

마지막으로 현재 단계를 추적하려면 변수가 필요합니다.

let currentStep = 1;

이제 우리는 모든 변수를 갖추고 있으므로 다음은 다음과 같습니다. nextstep() 기능:

function nextStep() {
  errorMsgs = [];
  errorMessagesDiv.innerText = "";

  switch (currentStep) {
    case 1:
      addValidationErrors(name, email, phone);
      validateStep(errorMsgs);
      break;

    case 2:
      addValidationErrors(company, jobTitle, yearsExperience);
      validateStep(errorMsgs);
      break;

    case 3:
      addValidationErrors(skills, highestDegree);
      validateStep(errorMsgs);
      break;
  }
}

순간 다음 버튼을 누르고, 우리의 코드는 사용자가 현재 켜져있는 단계를 확인 하고이 정보를 기반으로 호출하여 해당 특정 단계의 데이터를 검증합니다. addValidationErrors() 기능. 오류가 있으면 오류가 표시됩니다. 그런 다음 양식은 validateStep() 다음 단계로 넘어 가기 전에 오류가 없는지 확인합니다. 오류가 있으면 사용자가 다음 단계로 진행하지 못하게합니다.

때마다 nextStep() 함수가 실행되면 오류 메시지가 먼저 지워집니다. 다른 단계에서 기존 오류로의 추가 오류를 피하거나 addValidationErrors 기능이 실행됩니다. 그만큼 addValidationErrors 해당 단계의 필드를 인수로 사용하여 각 단계마다 기능이 호출됩니다.

다음은 다음과 같습니다 addValidationErrors 기능이 구현됩니다.

function addValidationErrors(fieldOne, fieldTwo, fieldThree = undefined) {
  if (!fieldOne.checkValidity()) {
    const label = document.querySelector(`label[for="${fieldOne.id}"]`);
    errorMsgs.push(`Please Enter A Valid ${label.textContent}`);
  }

  if (!fieldTwo.checkValidity()) {
    const label = document.querySelector(`label[for="${fieldTwo.id}"]`);
    errorMsgs.push(`Please Enter A Valid ${label.textContent}`);
  }

  if (fieldThree && !fieldThree.checkValidity()) {
    const label = document.querySelector(`label[for="${fieldThree.id}"]`);
    errorMsgs.push(`Please Enter A Valid ${label.textContent}`);
  }

  if (errorMsgs.length > 0) {
    errorMessagesDiv.innerText = errorMsgs.join("\n");
  }
}

이것이 방법입니다 validateStep() 함수가 정의됩니다.

function validateStep(errorMsgs) {
  if (errorMsgs.length === 0) {
    showStep(currentStep + 1);
  }
}

그만큼 validateStep() 기능은 오류를 확인합니다. 없으면 다음 단계로 진행됩니다. showStep() 기능.

function showStep(step) {
  steps.forEach((el, index) => {
    el.hidden = index + 1 !== step;
  });
  currentStep = step;
}

그만큼 showStep() 기능에는 DOM의 4 개의 필드가 필요합니다. 필드 세트를 사용할 수 있도록 JavaScript 코드 상단에 다음 줄을 추가하십시오.

const steps = document.querySelectorAll(".step");

뭐 showStep() 기능은 모든 것을 통과하는 것입니다 fieldsets 우리의 형태로 무엇이든 숨기십시오 fieldset 우리가 탐색하는 것과 같지 않습니다. 그런 다음 업데이트됩니다 currentStep 변수 우리가 탐색하는 단계와 동일합니다.

“이전”버튼

그만큼 previousStep() 함수는 이전의 단추. 이전 버튼이 클릭 될 때마다 nextStep 함수, 오류 메시지도 페이지에서 지우고 내비게이션도 showStep 기능.

function previousStep() {
  errorMessagesDiv.innerText = "";
  showStep(currentStep - 1);
}

때마다 showStep() 함수는 “”로 호출됩니다.currentStep - 1“(이 경우와 같이) 인수로서, 우리는 이전 단계로 돌아가서 다음 단계로 이동하면 다음 단계로 이동합니다. showStep() “currentStep + 1“논쟁으로 (의 경우와 같이 validateStep() 기능).

시각적 신호로 사용자 경험을 향상시킵니다

다단계 형식의 사용자 경험을 향상시키는 또 다른 방법은 시각적 신호를 통합하는 것입니다. 이러한 것들에는 진행 상황 표시기 또는 스테퍼가 포함될 수 있으며 사용자가 정확한 단계를 알 수 있도록 도와줍니다.

스테퍼 통합

스테퍼를 우리의 형태 (재료 설계에서 이와 같은 종류)에 통합하려면 첫 번째는 오프닝 바로 아래의 HTML에 추가하는 것입니다. tag.

다음으로, 우리는 현재 단계를 나타내는 스테퍼의 일부를 쿼리해야합니다. 클래스 이름이있는 스팬 태그입니다. currentStep.

const currentStepDiv = document.querySelector(".currentStep");

이제 이전 또는 다음 버튼을 클릭 할 때마다 스테퍼 값을 업데이트해야합니다. 이를 위해서는 업데이트해야합니다 showStep() 다음 줄을 추가하여 기능하십시오.

currentStepDiv.innerText = currentStep;

이 줄은 showStep() 기능 때문에 기능 showStep() 함수는 단계 사이를 탐색하고 업데이트 할 책임이 있습니다. currentStep 변하기 쉬운. 그래서, 때마다 currentStep 변수가 업데이트되며 CurrentSpdiv도 해당 변경 사항을 반영하도록 업데이트되어야합니다.

사용자 데이터 저장 및 검색

양식의 사용자 경험을 향상시킬 수있는 주요 방법 중 하나는 브라우저에 사용자 데이터를 저장하는 것입니다. 다단계 양식은 일반적으로 길고 사용자는 자신에 대한 많은 정보를 입력해야합니다. 사용자가 양식의 95%를 작성한 다음 실수로 F5 키보드의 버튼과 모든 진행 상황을 잃는 버튼. 그것은 사용자에게 정말 나쁜 경험이 될 것입니다.

사용 localStorage사용자 정보가 입력 되 자마자 저장하고 DOM 컨텐츠가로드 되 자마자 검색 할 수 있으므로 사용자는 언제 어디서나 양식을 작성할 수 있습니다. 이 기능을 양식에 추가하기 위해 사용자 정보가 입력하자마자 저장하여 시작할 수 있습니다. 이것은 그것을 사용하여 달성 할 수 있습니다 input 이벤트.

추가하기 전에 input 이벤트 리스너, DOM에서 양식 요소를 가져옵니다.

const form = document.getElementById("jobApplicationForm");

이제 우리는 추가 할 수 있습니다 input 이벤트 청취자 :

// Save data on each input event
form.addEventListener("input", () => {
  const formData = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    phone: document.getElementById("phone").value,
    company: document.getElementById("company").value,
    jobTitle: document.getElementById("jobTitle").value,
    yearsExperience: document.getElementById("yearsExperience").value,
    skills: document.getElementById("skills").value,
    highestDegree: document.getElementById("highestDegree").value,
  };
  localStorage.setItem("formData", JSON.stringify(formData));
});

다음으로 DOM 컨텐츠가로드되면 사용자 데이터를 검색하는 데 도움이되는 코드를 추가해야합니다.

window.addEventListener("DOMContentLoaded", () => {
  const savedData = JSON.parse(localStorage.getItem("formData"));
  if (savedData) {
    document.getElementById("name").value = savedData.name || "";
    document.getElementById("email").value = savedData.email || "";
    document.getElementById("phone").value = savedData.phone || "";
    document.getElementById("company").value = savedData.company || "";
    document.getElementById("jobTitle").value = savedData.jobTitle || "";
    document.getElementById("yearsExperience").value = savedData.yearsExperience || "";
    document.getElementById("skills").value = savedData.skills || "";
    document.getElementById("highestDegree").value = savedData.highestDegree || "";
  }
});

마지막으로 데이터를 제거하는 것이 좋습니다 localStorage 더 이상 필요하지 않은 즉시 :

// Clear data on form submit
form.addEventListener('submit', () => {
  // Clear localStorage once the form is submitted
  localStorage.removeItem('formData');
}); 

현재 단계 값을 추가합니다 localStorage

사용자가 실수로 브라우저를 닫으면 중단 된 곳으로 돌아갈 수 있어야합니다. 이것은 현재 단계 값도 저장해야 함을 의미합니다. localStorage.

이 값을 저장하려면 다음 줄을 showStep() 기능:

localStorage.setItem("storedStep", currentStep);

이제 현재 단계 값을 검색하고 DOM 컨텐츠가로드 될 때마다 중단 된 곳으로 사용자를 반환 할 수 있습니다. 다음 코드를 추가하십시오 DOMContentLoaded 그렇게 할 핸들러 :

const storedStep = localStorage.getItem("storedStep");

if (storedStep) {
    const storedStepInt = parseInt(storedStep);
    steps.forEach((el, index) => {
      el.hidden = index + 1 !== storedStepInt;
    });
    currentStep = storedStepInt;
    currentStepDiv.innerText = currentStep;
  }

또한 현재 단계 값을 지우는 것을 잊지 마십시오. localStorage 양식이 제출 될 때.

localStorage.removeItem("storedStep");

위의 줄은 제출 처리기에 추가되어야합니다.

마무리

다단계 양식을 작성하면 복잡한 데이터 입력에 대한 사용자 경험을 향상시키는 데 도움이 될 수 있습니다. 단계를 신중하게 계획하고 각 단계에서 양식 검증을 구현하고 브라우저에 사용자 데이터를 임시로 저장하면 사용자가 긴 양식을보다 쉽게 ​​완료 할 수 있습니다.

이 다중 단계 양식의 전체 구현을 위해 GitHub의 전체 코드에 액세스 할 수 있습니다.

(GG, YK)