多页表单:如何按请求无限期重复一页？HTML、CSS、JS

<form id="multi-page-form">
  <!-- 第一页 -->
  <div class="page">
    <!-- 第一页的表单内容 -->
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    <!-- 添加按钮 -->
    <button type="button" class="add-page">添加</button>
  </div>
  <!-- 其他页的内容会通过JS动态添加 -->
</form>

.page {
  display: none; /* 默认隐藏其他页 */
}

// 获取表单元素和添加按钮
const form = document.getElementById('multi-page-form');
const addButton = document.querySelector('.add-page');

// 添加按钮点击事件
addButton.addEventListener('click', function() {
  // 克隆第一页的内容
  const page = form.querySelector('.page');
  const clone = page.cloneNode(true);
  
  // 清空克隆内容的输入值
  const inputs = clone.querySelectorAll('input');
  inputs.forEach(input => input.value = '');
  
  // 添加克隆内容到表单中
  form.appendChild(clone);
  
  // 显示克隆内容
  clone.style.display = 'block';
});