Bootstrap框架多步骤表单

最新推荐文章于 2024-08-01 15:38:50 发布

少陽君

最新推荐文章于 2024-08-01 15:38:50 发布

阅读量441

点赞数 3

分类专栏：前端文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/u010674101/article/details/140849394

版权

前端专栏收录该内容

13 篇文章 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函数负责隐藏所有步骤并显示指定的步骤。

这个只是一个基本的实现，根据实际需要添加更多的功能和样式，如表单验证、进度指示器等。