HTML代码怎么实现分步表单_HTML代码分步表单设计与步骤切换功能实现

<form id="multiStepForm">
    <div class="form-step active" id="step1">
        <h2>个人信息</h2>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required>
        <button type="button" class="next-step">下一步</button>
    </div>

    <div class="form-step" id="step2">
        <h2>联系方式</h2>
        <label for="phone">电话:</label>
        <input type="tel" id="phone" name="phone">
        <label for="address">地址:</label>
        <input type="text" id="address" name="address">
        <button type="button" class="prev-step">上一步</button>
        <button type="button" class="next-step">下一步</button>
    </div>

    <div class="form-step" id="step3">
        <h2>确认信息</h2>
        <p>请确认您的信息无误。</p>
        <!-- 这里可以显示之前输入的数据供用户确认 -->
        <button type="button" class="prev-step">上一步</button>
        <button type="submit">提交</button>
    </div>

    <!-- 进度条或其他指示器可以在这里 -->
    <div id="progress-bar">
        <span class="step-indicator active">1</span>
        <span class="step-indicator">2</span>
        <span class="step-indicator">3</span>
    </div>
</form>

<style>
    .form-step {
        display: none; /* 默认隐藏所有步骤 */
        border: 1px solid #ccc;
        padding: 20px;
        margin-bottom: 15px;
        border-radius: 8px;
    }
    .form-step.active {
        display: block; /* 当前活动步骤显示 */
    }
    #progress-bar {
        text-align: center;
        margin-top: 20px;
    }
    .step-indicator {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        background-color: #eee;
        color: #555;
        margin: 0 5px;
        font-weight: bold;
    }
    .step-indicator.active {
        background-color: #007bff;
        color: white;
    }
</style>

<script>
    const form = document.getElementById('multiStepForm');
    const steps = form.querySelectorAll('.form-step');
    const prevBtns = form.querySelectorAll('.prev-step');
    const nextBtns = form.querySelectorAll('.next-step');
    const stepIndicators = form.querySelectorAll('.step-indicator');
    let currentStepIndex = 0;

    function showStep(index) {
        steps.forEach((step, i) => {
            step.classList.toggle('active', i === index);
        });
        stepIndicators.forEach((indicator, i) => {
            indicator.classList.toggle('active', i === index);
        });
    }

    function validateStep(index) {
        const currentStep = steps[index];
        const inputs = currentStep.querySelectorAll('input[required]');
        let isValid = true;
        inputs.forEach(input => {
            if (!input.value.trim()) {
                input.style.borderColor = 'red'; // 简单标记错误
                isValid = false;
            } else {
                input.style.borderColor = ''; // 清除标记
            }
        });
        return isValid;
    }

    nextBtns.forEach(button => {
        button.addEventListener('click', () => {
            if (validateStep(currentStepIndex)) { // 在进入下一步前验证当前步骤
                currentStepIndex++;
                showStep(currentStepIndex);
            } else {
                alert('请填写所有必填项！'); // 简单的错误提示
            }
        });
    });

    prevBtns.forEach(button => {
        button.addEventListener('click', () => {
            currentStepIndex--;
            showStep(currentStepIndex);
        });
    });

    // 初始化显示第一个步骤
    showStep(currentStepIndex);

    // 提交表单（这里只是一个示例，实际应用中会通过AJAX发送数据）
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        // 收集所有表单数据
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());
        console.log('表单数据:', data);
        alert('表单提交成功！请查看控制台。');
        // 实际应用中会在这里发送数据到服务器
    });
</script>

// 简单验证函数，可以扩展得更复杂
function validateStep(index) {
    const currentStep = steps[index];
    let isValid = true;
    currentStep.querySelectorAll('input[required]').forEach(input => {
        let errorElement = input.nextElementSibling; // 假设错误信息紧跟在input后面
        if (!errorElement || !errorElement.classList.contains('error-message')) {
            errorElement = document.createElement('span');
            errorElement.classList.add('error-message');
            input.parentNode.insertBefore(errorElement, input.nextSibling);
        }

        if (!input.value.trim()) {
            input.classList.add('input-error');
            errorElement.textContent = '此项为必填。';
            isValid = false;
        } else if (input.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value)) {
            input.classList.add('input-error');
            errorElement.textContent = '请输入有效的邮箱地址。';
            isValid = false;
        } else {
            input.classList.remove('input-error');
            errorElement.textContent = ''; // 清除错误信息
        }
    });
    return isValid;
}

/* 进度条样式 */
#progress-bar {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #757575;
    font-weight: bold;
    margin: 0 10px;
    position: relative;
    z-index: 1;
}
.step-indicator.active {
    background-color: #007bff;
    color: white;
}
.step-indicator.completed { /* 可以添加一个完成状态 */
    background-color: #28a745;
    color: white;
}
/* 步骤之间的连接线 */
#progress-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #e0e0e0;
    transform: translateY(-50%);
    z-index: 0;
}
/* 动态更新连接线颜色 */
/* 实际需要更复杂的JS来控制连接线，这里只是示意 */

let formData = {}; // 全局或局部变量，用于存储所有步骤的数据

// 在切换到下一步前，收集当前步骤的数据
nextBtns.forEach(button => {
    button.addEventListener('click', () => {
        if (validateStep(currentStepIndex)) {
            // 收集当前步骤的输入数据
            const currentStepInputs = steps[currentStepIndex].querySelectorAll('input, select, textarea');
            currentStepInputs.forEach(input => {
                formData[input.name] = input.value;
            });

            currentStepIndex++;
            showStep(currentStepIndex);
            // 填充下一步可能需要的数据 (如果存在)
            fillStepData(currentStepIndex);
        } else {
            alert('请填写所有必填项！');
        }
    });
});

// 在切换到上一步时，填充上一步的数据
prevBtns.forEach(button => {
    button.addEventListener('click', () => {
        currentStepIndex--;
        showStep(currentStepIndex);
        fillStepData(currentStepIndex); // 填充当前步骤（即刚刚回退到的步骤）的数据
    });
});

function fillStepData(index) {
    const currentStep = steps[index];
    currentStep.querySelectorAll('input, select, textarea').forEach(input => {
        if (formData[input.name]) {
            input.value = formData[input.name];
        }
    });
}