本文介绍如何通过原生javascript控制多个html表单的顺序展示，避免同时显示，实现“提交第一个表单后才显示第二个表单”的交互流程，适合初学者理解与实践。
本文介绍如何通过原生javascript控制多个html表单的顺序展示，避免同时显示，实现“提交第一个表单后才显示第二个表单”的交互流程，适合初学者理解与实践。
在HTML中，完全可以使用多个 <form> 标签——这是完全合法且常见的做法（例如多步骤注册、分步问卷等场景）。关键在于：默认让第一个表单可见，其余表单隐藏；用户提交第一个表单后，通过JavaScript动态切换显示状态，从而实现“表单依次出现”的效果。
以下是一个简洁、可直接运行的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单依次显示示例</title>
<style>
form { margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }
.hidden { display: none; }
</style>
</head>
<body>
<form id="form1">
<h3>第一步：基本信息</h3>
<label>姓名：<input type="text" name="name" required></label><br><br>
<button type="submit">下一步</button>
</form>
<form id="form2" class="hidden">
<h3>第二步：联系方式</h3>
<label>邮箱：<input type="email" name="email" required></label><br><br>
<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.add('hidden');
form2.classList.remove('hidden');
});
// 可选：监听第二个表单提交（如需最终处理数据）
form2.addEventListener('submit', function(e) {
e.preventDefault();
alert('所有信息已提交！\n（此处可发送数据到服务器）');
// 实际项目中可在此处调用 fetch() 或 axios 发送数据
});
</script>
</body>
</html>✅ 关键要点说明：
- 使用 e.preventDefault() 阻止表单默认提交行为（否则页面会刷新，状态丢失）；
- 推荐用 CSS 类（如 .hidden { display: none; }）控制显隐，比直接操作 style.display 更易维护；
- 每个 <form> 应有唯一 id，便于精准获取和操作；
- 不必手动“调用函数”，而是为表单绑定 submit 事件——更符合用户直觉（点击提交按钮即触发）；
- 后续可扩展：添加返回按钮、进度条、表单验证或本地数据暂存（如 localStorage）。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若表单涉及敏感信息（如密码），请务必在后端完成校验与存储，前端仅作体验优化；
- 移动端需注意按钮焦点与键盘收起逻辑，可配合 blur() 或 focusout 进一步优化；
- 多步骤表单建议为每步添加语义化 <fieldset> 和 <legend>，提升可访问性（a11y）。
掌握这种“状态驱动显示”的思路，是构建交互式网页的基础能力——它不仅适用于表单切换，也广泛用于选项卡、向导页、模态框等场景。
