多部分表单 - Html

在 Web 开发中，表单是一个非常重要的组件。表单通常可以用来收集用户输入的数据，通过提交表单的方式将数据传输到后端。 在一些情况下，可能需要用分步的方式让用户填写表单，这时就需要使用多部分表单。

多部分表单概述

多部分表单是指一个表单可以分为多个部分填写。用户可以在每个部分填写好数据后，逐步填写完整个表单。在表单的每一步提交时，都只提交当前步骤的数据。

典型的多部分表单通常会包含以下两个常见组件：

• 水平的分步条 (Step bar): 一般位于表单的上方。用来展示多个步骤，以及当前正在填写的步骤。
• 分步的表单 (Step form): 由多个表单组成，每个表单对应水平上的一个步骤。

多部分表单如何设计

下面是一种常见的多部分表单的设计方法：

1. 分析需要哪些字段，以及每个字段属于哪个步骤
2. 将表单按步骤进行分组，并将每个表单放到不同的 div 中，对每个 div 设置 display: none，表示一开始所有的表单都是隐藏的。
3. 在页面中加入水平的分步条，标记出每个步骤。
4. 监听水平的分步条上的点击事件，在点击切换到下一个步骤时，将当前步骤对应的表单隐藏，下一个步骤对应的表单显示。
5. 监听每个分步表单的 submit 事件：如果当前表单通过验证，通过 Ajax 提交数据到后端，如果后端返回错误信息，显示错误提示。如果提交成功，隐藏当前表单并显示下一个步骤对应的表单。

具体的设计可以参考以下代码：

<div class="step-progress">
  <div class="step-1">Step 1</div>
  <div class="step-2">Step 2</div>
  <div class="step-3">Step 3</div>
</div>

<div class="step-forms">
  <div class="step-form-1">
    <form>
      <!-- 表单 1 -->
    </form>
  </div>
  <div class="step-form-2" style="display: none">
    <form>
      <!-- 表单 2 -->
    </form>
  </div>
  <div class="step-form-3" style="display: none">
    <form>
      <!-- 表单 3 -->
    </form>
  </div>
</div>

使用 JavaScript 实现切换和提交逻辑：

const stepProgress = document.querySelector('.step-progress');
const stepForms = document.querySelector('.step-forms');
const forms = stepForms.querySelectorAll('form');

let currentStep = 1;

stepProgress.addEventListener('click', event => {
  const target = event.target;
  if (target.classList.contains('step-1')) currentStep = 1;
  if (target.classList.contains('step-2')) currentStep = 2;
  if (target.classList.contains('step-3')) currentStep = 3;

  updateStep();
});

Array.from(forms).forEach(form => {
  form.addEventListener('submit', event => {
    event.preventDefault();

    // 表单验证逻辑
    // ...

    // 如果前端验证通过，通过 Ajax 提交数据
    // ...

    // 如果后端返回错误信息，显示错误提示
    // ...

    // 如果提交成功，隐藏当前表单并显示下一个步骤对应的表单
    currentStep++;
    updateStep();
  });
});

function updateStep() {
  for (let i = 1; i <= 3; i++) {
    if (i === currentStep) {
      stepForms.querySelector(`.step-form-${i}`).style.display = 'block';
    } else {
      stepForms.querySelector(`.step-form-${i}`).style.display = 'none';
    }
  }
}

代码片段

# 多部分表单 - Html

在 Web 开发中，表单是一个非常重要的组件。表单通常可以用来收集用户输入的数据，通过提交表单的方式将数据传输到后端。 在一些情况下，可能需要用分步的方式让用户填写表单，这时就需要使用多部分表单。

## 多部分表单概述

多部分表单是指一个表单可以分为多个部分填写。用户可以在每个部分填写好数据后，逐步填写完整个表单。在表单的每一步提交时，都只提交当前步骤的数据。

典型的多部分表单通常会包含以下两个常见组件：

- 水平的分步条 (Step bar): 一般位于表单的上方。用来展示多个步骤，以及当前正在填写的步骤。
- 分步的表单 (Step form): 由多个表单组成，每个表单对应水平上的一个步骤。

## 多部分表单如何设计

下面是一种常见的多部分表单的设计方法：

1. 分析需要哪些字段，以及每个字段属于哪个步骤
2. 将表单按步骤进行分组，并将每个表单放到不同的 `div` 中，对每个 `div` 设置 `display: none`，表示一开始所有的表单都是隐藏的。
3. 在页面中加入水平的分步条，标记出每个步骤。
4. 监听水平的分步条上的点击事件，在点击切换到下一个步骤时，将当前步骤对应的表单隐藏，下一个步骤对应的表单显示。
5. 监听每个分步表单的 `submit` 事件：如果当前表单通过验证，通过 Ajax 提交数据到后端，如果后端返回错误信息，显示错误提示。如果提交成功，隐藏当前表单并显示下一个步骤对应的表单。

具体的设计可以参考以下代码：

    <div class="step-progress">
      <div class="step-1">Step 1</div>
      <div class="step-2">Step 2</div>
      <div class="step-3">Step 3</div>
    </div>

    <div class="step-forms">
      <div class="step-form-1">
        <form>
          <!-- 表单 1 -->
        </form>
      </div>
      <div class="step-form-2" style="display: none">
        <form>
          <!-- 表单 2 -->
        </form>
      </div>
      <div class="step-form-3" style="display: none">
        <form>
          <!-- 表单 3 -->
        </form>
      </div>
    </div>

使用 JavaScript 实现切换和提交逻辑：

    const stepProgress = document.querySelector('.step-progress');
    const stepForms = document.querySelector('.step-forms');
    const forms = stepForms.querySelectorAll('form');

    let currentStep = 1;

    stepProgress.addEventListener('click', event => {
      const target = event.target;
      if (target.classList.contains('step-1')) currentStep = 1;
      if (target.classList.contains('step-2')) currentStep = 2;
      if (target.classList.contains('step-3')) currentStep = 3;

      updateStep();
    });

    Array.from(forms).forEach(form => {
      form.addEventListener('submit', event => {
        event.preventDefault();

        // 表单验证逻辑
        // ...

        // 如果前端验证通过，通过 Ajax 提交数据
        // ...

        // 如果后端返回错误信息，显示错误提示
        // ...

        // 如果提交成功，隐藏当前表单并显示下一个步骤对应的表单
        currentStep++;
        updateStep();
      });
    });

    function updateStep() {
      for (let i = 1; i <= 3; i++) {
        if (i === currentStep) {
          stepForms.querySelector(`.step-form-${i}`).style.display = 'block';
        } else {
          stepForms.querySelector(`.step-form-${i}`).style.display = 'none';
        }
      }
    }

参考资料

• 多部分 Form - MDN Web Docs
• Creating Multi Step Form with jQuery and CSS3 - tutorialzine