电子商务网站免费模板,天堂 在线地址8,2023新闻热点摘抄,梵克雅宝官网中国官网使用 HTML、CSS 和 JavaScript 创建多步骤表单
为了处理又长又复杂的表单#xff0c;我们需要将它们分成多个步骤。通过一次只在屏幕上显示一些输入#xff0c;表单会感觉更容易理解#xff0c;并防止用户感到被大量的表单字段淹没。
在本文中#xff0c;我将逐步指导如何…使用 HTML、CSS 和 JavaScript 创建多步骤表单
为了处理又长又复杂的表单我们需要将它们分成多个步骤。通过一次只在屏幕上显示一些输入表单会感觉更容易理解并防止用户感到被大量的表单字段淹没。
在本文中我将逐步指导如何实现多步骤表单。当我们继续填写表单步骤时步进器将显示在表单上方代表进度条。每个表单步骤将包含名为 prev和next的按钮。这些按钮将使我们能够在步骤之间导航。
只需 3 个简单步骤即可构建多步骤表单
使用 HTML 创建表单和步骤元素的布局。使用 JavaScript 使多步骤表单发挥作用。使用 CSS 设计表单和步骤元素。
使用 HTML 创建表单和步骤元素的布局
在实现表单步骤的导航器之前让我们先设置一个基本的 HTML 表单。它将包括一个表单步进器它将充当进度条。它将包含多个代表步骤编号的项目。这些项目将显示为圆圈其中包含步骤编号。未完成的步骤的圆圈背景颜色将为灰色。活动步骤的圆圈背景颜色为紫色。并且已完成的步骤的圆圈背景颜色将为绿色。在表单步进器之后我们需要创建一个具有多个部分的表单。这些部分将适用于所有步骤并将包含每个表单步骤的表单字段。每个步骤将包含一个上一个和下一个按钮这将有助于在步骤之间导航。但是最后一步将显示“保存”按钮
将以下代码片段添加到要实现多步骤表单的部分:
divdiv idmulti-step-form-container!-- Form Steps / Progress Bar --ul classform-stepper form-stepper-horizontal text-center mx-auto pl-0!-- Step 1 --li classform-stepper-active text-center form-stepper-list step1a classmx-2span classform-stepper-circlespan1/span/spandiv classlabelAccount Basic Details/div/a/li!-- Step 2 --li classform-stepper-unfinished text-center form-stepper-list step2a classmx-2span classform-stepper-circle text-mutedspan2/span/spandiv classlabel text-mutedSocial Profiles/div/a/li!-- Step 3 --li classform-stepper-unfinished text-center form-stepper-list step3a classmx-2span classform-stepper-circle text-mutedspan3/span/spandiv classlabel text-mutedPersonal Details/div/a/li/ul!-- Step Wise Form Content --form iduserAccountSetupForm nameuserAccountSetupForm enctypemultipart/form-data methodPOST!-- Step 1 Content --section idstep-1 classform-steph2 classfont-normalAccount Basic Details/h2!-- Step 1 input fields --div classmt-3Step 1 input fields goes here../divdiv classmt-3button classbutton btn-navigate-form-step typebutton step_number2Next/button/div/section!-- Step 2 Content, default hidden on page load. --section idstep-2 classform-step d-noneh2 classfont-normalSocial Profiles/h2!-- Step 2 input fields --div classmt-3Step 2 input fields goes here../divdiv classmt-3button classbutton btn-navigate-form-step typebutton step_number1Prev/buttonbutton classbutton btn-navigate-form-step typebutton step_number3Next/button/div/section!-- Step 3 Content, default hidden on page load. --section idstep-3 classform-step d-noneh2 classfont-normalPersonal Details/h2!-- Step 3 input fields --div classmt-3Step 3 input fields goes here../divdiv classmt-3button classbutton btn-navigate-form-step typebutton step_number2Prev/buttonbutton classbutton submit-btn typesubmitSave/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;
}样式展示
