当前位置: 首页 > news >正文

使用 HTML、CSS 和 JavaScript 创建多步骤表单

使用 HTML、CSS 和 JavaScript 创建多步骤表单

为了处理又长又复杂的表单,我们需要将它们分成多个步骤。通过一次只在屏幕上显示一些输入,表单会感觉更容易理解,并防止用户感到被大量的表单字段淹没。

在本文中,我将逐步指导如何实现多步骤表单。当我们继续填写表单步骤时,步进器将显示在表单上方,代表进度条。每个表单步骤将包含名为 prevnext的按钮。这些按钮将使我们能够在步骤之间导航。

只需 3 个简单步骤即可构建多步骤表单:

  • 使用 HTML 创建表单和步骤元素的布局。
  • 使用 JavaScript 使多步骤表单发挥作用。
  • 使用 CSS 设计表单和步骤元素。

使用 HTML 创建表单和步骤元素的布局

在实现表单步骤的导航器之前,让我们先设置一个基本的 HTML 表单。它将包括一个表单步进器,它将充当进度条。它将包含多个代表步骤编号的项目。这些项目将显示为圆圈,其中包含步骤编号。未完成的步骤的圆圈背景颜色将为灰色。活动步骤的圆圈背景颜色为紫色。并且,已完成的步骤的圆圈背景颜色将为绿色。在表单步进器之后,我们需要创建一个具有多个部分的表单。这些部分将适用于所有步骤,并将包含每个表单步骤的表单字段。每个步骤将包含一个上一个和下一个按钮,这将有助于在步骤之间导航。但是,最后一步将显示“保存”按钮,

将以下代码片段添加到要实现多步骤表单的部分:

<div><div id="multi-step-form-container"><!-- Form Steps / Progress Bar --><ul class="form-stepper form-stepper-horizontal text-center mx-auto pl-0"><!-- Step 1 --><li class="form-stepper-active text-center form-stepper-list" step="1"><a class="mx-2"><span class="form-stepper-circle"><span>1</span></span><div class="label">Account Basic Details</div></a></li><!-- Step 2 --><li class="form-stepper-unfinished text-center form-stepper-list" step="2"><a class="mx-2"><span class="form-stepper-circle text-muted"><span>2</span></span><div class="label text-muted">Social Profiles</div></a></li><!-- Step 3 --><li class="form-stepper-unfinished text-center form-stepper-list" step="3"><a class="mx-2"><span class="form-stepper-circle text-muted"><span>3</span></span><div class="label text-muted">Personal Details</div></a></li></ul><!-- Step Wise Form Content --><form id="userAccountSetupForm" name="userAccountSetupForm" enctype="multipart/form-data" method="POST"><!-- Step 1 Content --><section id="step-1" class="form-step"><h2 class="font-normal">Account Basic Details</h2><!-- Step 1 input fields --><div class="mt-3">Step 1 input fields goes here..</div><div class="mt-3"><button class="button btn-navigate-form-step" type="button" step_number="2">Next</button></div></section><!-- Step 2 Content, default hidden on page load. --><section id="step-2" class="form-step d-none"><h2 class="font-normal">Social Profiles</h2><!-- Step 2 input fields --><div class="mt-3">Step 2 input fields goes here..</div><div class="mt-3"><button class="button btn-navigate-form-step" type="button" step_number="1">Prev</button><button class="button btn-navigate-form-step" type="button" step_number="3">Next</button></div></section><!-- Step 3 Content, default hidden on page load. --><section id="step-3" class="form-step d-none"><h2 class="font-normal">Personal Details</h2><!-- Step 3 input fields --><div class="mt-3">Step 3 input fields goes here..</div><div class="mt-3"><button class="button btn-navigate-form-step" type="button" step_number="2">Prev</button><button class="button submit-btn" type="submit">Save</button></div></section></form></div>
</div>

使用 JavaScript 使多步骤表单发挥作用

现在,我们需要实现在表单步骤之间导航的逻辑。创建一个名为 navigateToFormStep 的箭头函数,它将接受一个名为 stepNumber 的参数。该函数将接收您想要访问的步骤的值。它将把前面的步骤标记为已完成,当前步骤标记为活动,其余步骤标记为未完成。它适用于上一个和下一个按钮,因为我们只需要传递可见并标记为活动的步骤号。接下来,我们需要选择所有上一个和下一个按钮,并为每个按钮添加一个单击事件侦听器。单击任何这些按钮时,将触发一个匿名函数,该函数将获取目标步骤的值,并调用navigateToFormStep函数来执行导航过程。

const navigateToFormStep = (stepNumber) => {document.querySelectorAll(".form-step").forEach((formStepElement) => {formStepElement.classList.add("d-none");});document.querySelectorAll(".form-stepper-list").forEach((formStepHeader) => {formStepHeader.classList.add("form-stepper-unfinished");formStepHeader.classList.remove("form-stepper-active", "form-stepper-completed");});document.querySelector("#step-" + stepNumber).classList.remove("d-none");const formStepCircle = document.querySelector('li[step="' + stepNumber + '"]');
e.classList.remove("form-stepper-unfinished", "form-stepper-completed");formStepCircle.classList.add("form-stepper-active");for (let index = 0; index < stepNumber; index++) {const formStepCircle = document.querySelector('li[step="' + index + '"]');if (formStepCircle) {formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-active");formStepCircle.classList.add("form-stepper-completed");}}
};
document.querySelectorAll(".btn-navigate-form-step").forEach((formNavigationBtn) => {formNavigationBtn.addEventListener("click", () => {const stepNumber = parseInt(formNavigationBtn.getAttribute("step_number"));navigateToFormStep(stepNumber);});
});

使用 CSS 设计表单和步骤元素

由于我们已经完成了多步骤表单的实现,因此我们需要添加一些 CSS 片段来设计 HTML 内容的布局。

h1 {text-align: center;
}
h2 {margin: 0;
}
#multi-step-form-container {margin-top: 5rem;
}
.text-center {text-align: center;
}
.mx-auto {margin-left: auto;margin-right: auto;
}
.pl-0 {padding-left: 0;
}
.button {padding: 0.7rem 1.5rem;border: 1px solid #4361ee;background-color: #4361ee;color: #fff;border-radius: 5px;cursor: pointer;
}
.submit-btn {border: 1px solid #0e9594;background-color: #0e9594;
}
.mt-3 {margin-top: 2rem;
}
.d-none {display: none;
}
.form-step {border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 20px;padding: 3rem;
}
.font-normal {font-weight: normal;
}
ul.form-stepper {counter-reset: section;margin-bottom: 3rem;
}
ul.form-stepper .form-stepper-circle {position: relative;
}
ul.form-stepper .form-stepper-circle span {position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);
}
.form-stepper-horizontal {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}
ul.form-stepper > li:not(:last-of-type) {margin-bottom: 0.625rem;-webkit-transition: margin-bottom 0.4s;-o-transition: margin-bottom 0.4s;transition: margin-bottom 0.4s;
}
.form-stepper-horizontal > li:not(:last-of-type) {margin-bottom: 0 !important;
}
.form-stepper-horizontal li {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;-webkit-box-align: start;-ms-flex-align: start;align-items: start;-webkit-transition: 0.5s;transition: 0.5s;
}
.form-stepper-horizontal li:not(:last-child):after {position: relative;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;height: 1px;content: "";top: 32%;
}
.form-stepper-horizontal li:after {background-color: #dee2e6;
}
.form-stepper-horizontal li.form-stepper-completed:after {background-color: #4da3ff;
}
.form-stepper-horizontal li:last-child {flex: unset;
}
ul.form-stepper li a .form-stepper-circle {display: inline-block;width: 40px;height: 40px;margin-right: 0;line-height: 1.7rem;text-align: center;background: rgba(0, 0, 0, 0.38);border-radius: 50%;
}
.form-stepper .form-stepper-active .form-stepper-circle {background-color: #4361ee !important;color: #fff;
}
.form-stepper .form-stepper-active .label {color: #4361ee !important;
}
.form-stepper .form-stepper-active .form-stepper-circle:hover {background-color: #4361ee !important;color: #fff !important;
}
.form-stepper .form-stepper-unfinished .form-stepper-circle {background-color: #f8f7ff;
}
.form-stepper .form-stepper-completed .form-stepper-circle {background-color: #0e9594 !important;color: #fff;
}
.form-stepper .form-stepper-completed .label {color: #0e9594 !important;
}
.form-stepper .form-stepper-completed .form-stepper-circle:hover {background-color: #0e9594 !important;color: #fff !important;
}
.form-stepper .form-stepper-active span.text-muted {color: #fff !important;
}
.form-stepper .form-stepper-completed span.text-muted {color: #fff !important;
}
.form-stepper .label {font-size: 1rem;margin-top: 0.5rem;
}
.form-stepper a {cursor: default;
}

样式展示

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

http://www.lryc.cn/news/128191.html

相关文章:

  • C语言笔试训练【第九天】
  • 左邻右舍裂差法求和 以及 连续自然数的立方和公式
  • 阿里云故障洞察提效 50%,全栈可观测建设有哪些技术要点?
  • docker run 命令30个常用参数详解
  • [kali]kali linux镜像下载地址
  • 考研408 | 【操作系统】操作系统的概述
  • VM部署CentOS并且设置网络
  • 多维时序 | MATLAB实现KOA-CNN-BiGRU-Attention多变量时间序列预测
  • 深入Redis线程模型
  • idea cannot download sources 解决方法
  • CS:GO升级 Linux不再是“法外之地”
  • 手写spring笔记
  • shell的两种属性: 交互(interactive)与登录(login)
  • 实现简单的element-table的拖拽效果
  • Web网页浏览器远程访问jupyter notebook服务器【内网穿透】
  • 干翻Dubbo系列第十一篇:Dubbo常见协议与通信效率对比
  • 春秋云镜 CVE-2020-17530
  • 【java毕业设计】基于Spring Boot+Vue+mysql的论坛管理系统设计与实现(程序源码)-论坛管理系统
  • 华为在ospf area 0单区域的情况下结合pbr对数据包的来回路径进行控制
  • PyQt5登录界面跳转
  • git add 用法
  • 系统架构设计师---2018年下午试题1分析与解答(试题三)
  • 面试时如何回答接口测试怎么进行
  • 【LeetCode】647.回文子串
  • 【Git】SSH到底是什么
  • 当你出差在外时,怎样轻松访问远程访问企业局域网象过河ERP系统?
  • 机器学习与模型识别1:SVM(支持向量机)
  • 在CentOS7.9上安装最新版本Docker安装步骤
  • 基于 spring boot 的动漫信息管理系统【源码在文末】
  • vue项目根据word模版导出word文件