В этом уроке мы рассмотрим различные методы создания многошаговой формы с индикатором выполнения с помощью Bootstrap 5. Многошаговые формы — отличный способ разбить длинные и сложные формы на более мелкие и более управляемые разделы, улучшая пользовательский опыт и вовлеченность. Включив индикатор выполнения, вы можете предоставить пользователям визуальные подсказки об их прогрессе в форме. Давайте углубимся в различные подходы к реализации этой функциональности.

Метод 1: использование Bootstrap Carousel
Компонент Bootstrap Carousel можно использовать для создания многошаговой формы. Каждый слайд в карусели представляет собой этап формы. Добавляя кнопки навигации и обновляя слайд-карусель в зависимости от взаимодействия с пользователем, мы можем создать удобную многоэтапную форму.

<div id="multiStepForm" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <!-- Step 1 content -->
    </div>
    <div class="carousel-item">
      <!-- Step 2 content -->
    </div>
    <div class="carousel-item">
      <!-- Step 3 content -->
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#multiStepForm" data-bs-slide="prev">
    <!-- Previous button -->
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#multiStepForm" data-bs-slide="next">
    <!-- Next button -->
  </button>
</div>

Метод 2: использование классов JavaScript и CSS
Другой подход предполагает использование JavaScript для управления видимостью шагов формы и соответствующего обновления индикатора выполнения. Классы CSS используются для отображения и скрытия соответствующих шагов в зависимости от взаимодействия с пользователем.

<div id="multiStepForm">
  <div class="step step1">
    <!-- Step 1 content -->
  </div>
  <div class="step step2">
    <!-- Step 2 content -->
  </div>
  <div class="step step3">
    <!-- Step 3 content -->
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<script>
  const steps = document.querySelectorAll('.step');
  const progressBar = document.querySelector('.progress-bar');
  let currentStep = 1;
  function updateProgress() {
    const progress = ((currentStep - 1) / (steps.length - 1)) * 100;
    progressBar.style.width = progress + '%';
    progressBar.setAttribute('aria-valuenow', progress);
  }
  function showStep(stepNumber) {
    steps.forEach((step) => {
      step.style.display = 'none';
    });
    steps[stepNumber - 1].style.display = 'block';
    currentStep = stepNumber;
    updateProgress();
  }
// Example usage
  showStep(1);
</script>

Метод 3: использование платформы JavaScript (Vue.js)
Если вы используете среду JavaScript, например Vue.js, вы можете воспользоваться преимуществами ее компонентной архитектуры для создания многоэтапной формы с прогрессом. бар. Vue.js предоставляет такие функции, как условный рендеринг и обработка событий, что упрощает управление состоянием формы и взаимодействием с пользователем.

<template>
  <div>
    <div v-if="currentStep === 1">
      <!-- Step 1 content -->
    </div>
    <div v-else-if="currentStep === 2">
      <!-- Step 2 content -->
    </div>
    <div v-else-if="currentStep === 3">
      <!-- Step 3 content -->
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" : :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <button @click="previousStep" v-if="currentStep > 1">Previous</button>
    <button @click="nextStep" v-if="currentStep < totalSteps">Next</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        currentStep: 1,
        totalSteps: 3,
      };
    },
    computed: {
      progress() {
        return ((this.currentStep - 1) / (this.totalSteps - 1)) * 100;
      },
    },
    methods: {
      previousStep() {
        this.currentStep--;
      },
nextStep() {
        this.currentStep++;
      },
    },
  };
</script>

В этом руководстве мы рассмотрели три различных метода создания многоэтапной формы с индикатором выполнения с помощью Bootstrap 5. Независимо от того, решите ли вы использовать Bootstrap Carousel, классы JavaScript и CSS или фреймворк JavaScript, такой как Vue.js, Каждый подход предлагает свои преимущества и гибкость. Внедрив многоэтапную форму с индикатором выполнения, вы можете улучшить взаимодействие с пользователем и повысить скорость заполнения формы. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего проекта.