阅读量:0
这是一个包含多个步骤的表单，每个步骤展示不同的内容或表单字段。用户通过“下一步”或“上一步”按钮在各步骤之间导航。这个表单通常用于分步骤引导用户完成复杂的任务。
在Bootstrap框架中，可以使用卡片（Card）组件和按钮（Button）组件来创建一个多步骤界面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multi-step Form Example</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <div class="card"> <div class="card-header"> <h4>Multi-step Form Example</h4> </div> <div class="card-body"> <div id="step1"> <h5>Step 1</h5> <p>Enter your name:</p> <input type="text" class="form-control mb-3" placeholder="Name"> <button class="btn btn-primary" onclick="showStep(2)">Next</button> </div> <div id="step2" style="display: none;"> <h5>Step 2</h5> <p>Enter your email:</p> <input type="email" class="form-control mb-3" placeholder="Email"> <button class="btn btn-secondary" onclick="showStep(1)">Previous</button> <button class="btn btn-primary" onclick="showStep(3)">Next</button> </div> <div id="step3" style="display: none;"> <h5>Step 3</h5> <p>Review and Submit:</p> <button class="btn btn-secondary" onclick="showStep(2)">Previous</button> <button class="btn btn-success">Submit</button> </div> </div> </div> </div> <script> function showStep(step) { // Hide all steps document.getElementById('step1').style.display = 'none'; document.getElementById('step2').style.display = 'none'; document.getElementById('step3').style.display = 'none'; // Show the current step document.getElementById('step' + step).style.display = 'block'; } </script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html> - HTML结构：使用了Bootstrap的卡片组件（Card）来包裹多步骤表单的内容。
- 步骤显示：每个步骤都是一个
<div>元素，初始状态下只有第一个步骤显示，其余的步骤通过CSS的display: none隐藏。 - 按钮导航：每个步骤都有“下一步”和“上一步”按钮，点击这些按钮会调用JavaScript函数
showStep(step)，根据传递的步骤编号显示相应的内容。 - JavaScript控制：
showStep函数负责隐藏所有步骤并显示指定的步骤。
这个只是一个基本的实现，根据实际需要添加更多的功能和样式，如表单验证、进度指示器等。
