HTML中实现两个表单依次显示的方法咨询

首先明确：完全可以使用两个独立的<form>标签，这是HTML的合法用法，不用担心语法问题。

给你一个超简单的实现方案，只用基础HTML+少量JS，适合新手：

实现步骤 #

1. 编写两个表单，给第二个表单添加初始隐藏的样式
2. 给第一个表单的按钮绑定点击事件，触发显示第二个表单的函数
3. （可选）如果用提交按钮，要阻止默认的表单提交行为，避免页面跳转

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>分步表单</title>
</head>
<body>
    <!-- 第一个表单 -->
    <form id="form1">
        <h3>第一步：填写基础信息</h3>
        <label>姓名：<input type="text" name="username" required></label><br><br>
        <!-- 用普通按钮触发事件，避免默认提交跳转 -->
        <button type="button" onclick="showNextForm()">下一步</button>
    </form>

    <!-- 第二个表单，初始隐藏 -->
    <form id="form2" style="display: none;">
        <h3>第二步：填写详细信息</h3>
        <label>邮箱：<input type="email" name="email" required></label><br><br>
        <button type="submit">提交</button>
    </form>

    <script>
        function showNextForm() {
            // 隐藏第一个表单，显示第二个表单
            document.getElementById('form1').style.display = 'none';
            document.getElementById('form2').style.display = 'block';
        }
    </script>
</body>
</html>

代码说明 #

• 第二个表单的style="display: none;"让它一开始不显示
• 第一个表单用type="button"的按钮，不会触发表单提交，只执行我们写的showNextForm函数
• JS函数里通过ID获取两个表单元素，修改它们的display属性来切换显示状态

如果一定要用提交按钮（比如需要验证第一个表单的必填项），可以稍微改一下按钮的事件，阻止默认行为：

<!-- 第一个表单的提交按钮写法 -->
<button type="submit" onclick="event.preventDefault(); showNextForm();">下一步</button>

这样点击按钮时，浏览器不会提交表单，而是执行我们的切换函数，同时还能保留HTML自带的必填项验证（比如姓名没填的话会提示）。

内容的提问来源于stack exchange，提问作者little_penguin_