本文介绍如何使用纯html与javascript实现两个表单按顺序逐个显示——即用户提交第一个表单后，第二个表单才出现，避免页面同时展示多个表单造成的干扰。方法简单、兼容性好，适合初学者快速上手。
本文介绍如何使用纯html与javascript实现两个表单按顺序逐个显示——即用户提交第一个表单后，第二个表单才出现，避免页面同时展示多个表单造成的干扰。方法简单、兼容性好，适合初学者快速上手。
在HTML中，完全允许存在多个 <form> 标签，且这是常见且标准的做法（例如注册流程中的“基本信息→验证信息→完成”多步表单）。关键不在于能否写多个表单，而在于如何控制它们的显示逻辑：让一个表单提交后，自动隐藏自身并显示下一个。
下面是一个完整、可直接运行的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分步表单示例</title>
<style>
.form-step { display: none; }
.form-step.active { display: block; }
</style>
</head>
<body>
<!-- 第一步：用户信息 -->
<form id="form1" class="form-step active">
<h3>第1步：请输入您的姓名</h3>
<input type="text" name="name" required placeholder="姓名">
<button type="submit">下一步</button>
</form>
<!-- 第二步：邮箱确认 -->
<form id="form2" class="form-step">
<h3>第2步：请输入您的邮箱</h3>
<input type="email" name="email" required placeholder="邮箱地址">
<button type="submit">提交</button>
</form>
<script>
const form1 = document.getElementById('form1');
const form2 = document.getElementById('form2');
// 阻止默认提交并切换表单
form1.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止页面刷新
form1.classList.remove('active');
form2.classList.add('active');
});
form2.addEventListener('submit', function(e) {
e.preventDefault();
alert('表单已全部提交！\n姓名：' + form1.querySelector('input[name="name"]').value +
'\n邮箱：' + form2.querySelector('input[name="email"]').value);
// 实际项目中可在此处发送数据到服务器
});
</script>
</body>
</html>✅ 关键要点说明：
- 使用 display: none/block 或更推荐的 CSS 类控制显隐（语义清晰、便于维护）；
- 为每个 <form> 设置唯一 id，便于 JavaScript 精准操作；
- 务必调用 e.preventDefault() —— 否则表单会触发默认提交并刷新页面，导致状态丢失；
- 表单切换时，可保留前一步输入的数据（如示例中通过 querySelector 获取值），便于最终统一提交或逐步校验；
- 如需返回上一步，可添加「上一步」按钮并复用类似逻辑（只需反向切换 .active 类即可）。
? 进阶提示（非必需但实用）：
立即学习“前端免费学习笔记（深入）”；
- 可配合简单验证（如检查必填项是否为空）再执行切换；
- 添加过渡动画（如 opacity + transition）提升用户体验；
- 若步骤较多，建议封装成函数或使用 data-step 属性统一管理，避免硬编码。
只要理解“表单本身是静态结构，显示逻辑由JS动态控制”，就能轻松构建清晰、友好的多步交互流程。
