Logo

菜单

发布于 2026-01-06 4 阅读
0

使用 HTML/CSS/JavaScript 制作的超棒 Stepper 表单 DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

使用 HTML/CSS/JavaScript 制作的超棒的步进表单

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

原文发布于我的博客

在处理长表单时，分步表单或多步骤表单是一个非常实用的功能。它能以更友好的表单格式提升用户体验。在本教程中，我们将使用 HTML、CSS 和 JavaScript 创建一个分步表单。

您可以在Codepen上查看实时效果：Stepper Form

我们开始吧！

标记

如您所见，HTML 文件相对简单。



    <main>
      <div class="stepper">
        <div class="step--1 step-active">Step 1</div>
        <div class="step--2">Step 2</div>
        <div class="step--3">Step 3</div>
        <div class="step--4">Finish</div>
      </div>
      <form class="form form-active">
        <div class="form--header-container">
          <h1 class="form--header-title">
            Personal Info
          </h1>

          <p class="form--header-text">
            Tell us more about you.
          </p>
        </div>
        <input type="text" placeholder="Name" />
        <input type="text" placeholder="Email" />
        <input type="text" placeholder="Password" />
        <button class="form__btn" id="btn-1">Next</button>
      </form>
      <form class="form">
        <div class="form--header-container">
          <h1 class="form--header-title">
            Company Info
          </h1>

          <p class="form--header-text">
            Tell us more about your company.
          </p>
        </div>

        <input type="text" placeholder="Company Name" />
        <input type="text" placeholder="Job title" />
        <input type="text" placeholder="Location" />
        <button class="form__btn" id="btn-2-prev">Previous</button>
        <button class="form__btn" id="btn-2-next">Next</button>
      </form>
      <form class="form">
        <div class="form--header-container">
          <h1 class="form--header-title">
            Social account
          </h1>

          <p class="form--header-text">
            Tell us more about your social account.
          </p>
        </div>
        <input type="text" placeholder="Linkedin" />
        <input type="text" placeholder="Twitter" />
        <input type="text" placeholder="Github" />
        <button class="form__btn" id="btn-3">Submit</button>
      </form>
      <div class="form--message"></div>
    </main>
Enter fullscreen mode Exit fullscreen mode

除了标签之外main，我们还定义了一个div包含步进器元素的元素。然后，我们使用三个forms带有不同按钮的元素id，这些按钮将借助 JavaScript 实现步进效果。

有了这些，我们现在就可以用 CSS 来设置项目的样式了。

造型

在这里，我们首先进行一些重置，然后设置font-family标签background-color的属性body。



@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #f5f6f7;
  font-family: 'Nunito', sans-serif;
}

main {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们使用标签flex上的值main来使元素相对于body标签居中。



.stepper {
  width: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 5%;
}

.step--1,
.step--2,
.step--3,
.step--4 {
  width: 5rem;
  padding: 0.5rem 0;
  background: #fff;
  color: #666;
  text-align: center;
}
.step--1,
.step--2,
.step--3 {
  border-right: 1px solid #666;
}
Enter fullscreen mode Exit fullscreen mode

对于 Stepper 元素，我们依靠 CSS flexbox 将它们水平对齐，然后使用它们的类名来添加样式。



.form {
  background: #fff;
  text-align: center;
  position: absolute;
  width: 25rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
  display: none;
  border-radius: 1rem;
  overflow: hidden;
}
.form--header-container {
  background: linear-gradient(to right, rgb(51, 51, 51), #919191);
  color: #fff;
  height: 6rem;
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.form--header-title {
  font-size: 1.4rem;
}

.form--header-text {
  padding: 0.5rem 0;
}

input[type='text'] {
  padding: 0.8rem;
  margin: auto;
  margin-top: 0.5rem;
  width: 20rem;
  display: block;
  border-radius: 0.5rem;
  outline: none;
  border: 1px solid #bdbdbb;
}

.form__btn {
  background: #333;
  color: #fff;
  outline: none;
  border: none;
  padding: 0.5rem 0.7rem;
  width: 7rem;
  margin: 1rem auto;
  border-radius: 0.9rem;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.form--message-text {
  width: 25rem;
  background: #fff;
  color: #444;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 1.4rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
  animation: fadeIn 0.8s;
  border-radius: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

active class一开始，我们将隐藏所有三个表单。只会显示包含该类的表单。

在form--header-container类中，我们用它linear-gradient来设置表单标题的样式。

接下来，在form--message-text类中，我们添加了一个animation属性，以便在表单成功提交时产生淡入效果。



.form-active {
  z-index: 1000;
  display: block;
}
.form-active-animate {
  animation: moveRight 1s;
}
.form-inactive {
  display: block;
  animation: moveLeft 1s;
}

.step-active {
  background: #666;
  color: #fff;
  border: 1px solid #666;
}
Enter fullscreen mode Exit fullscreen mode

我们使用form-active类来显示当前表单，并使用属性z-index将表单置于其他元素之上。

接下来，我们使用form-active-animate该类来实现从左到右的流畅动画效果。我们还有一个类名form-inactive可以帮助隐藏之前的表单。



@keyframes moveRight {
  0% {
    transform: translateX(-27rem) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateX(0rem) scale(1);
    opacity: 1;
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(0rem) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(27rem) scale(0.9);
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
Enter fullscreen mode Exit fullscreen mode

正如你在这里看到的，我们依靠它keyframes来制作动画。

第一个动画moveRight将使用该属性将元素从左向右移动transform。

第二个动画的制作过程基本相同，只是元素会更多地向右侧移动。

最后一个动画fadeIn将在元素显示时开始淡入效果。

JavaScript

如您所见，我们监听点击事件，然后使用该gotoNextForm函数来处理它。



const formBtn1 = document.querySelector('#btn-1');
const formBtnPrev2 = document.querySelector('#btn-2-prev');
const formBtnNext2 = document.querySelector('#btn-2-next');
const formBtn3 = document.querySelector('#btn-3');
Enter fullscreen mode Exit fullscreen mode

要与 DOM 进行交互，我们需要使用该querySelector方法选择所有表单按钮。



// Button listener of form 1
formBtn1.addEventListener('click', function(e) {
  gotoNextForm(formBtn1, formBtnNext2, 1, 2);
  e.preventDefault();
});

// Next button listener of form 2
formBtnNext2.addEventListener('click', function(e) {
  gotoNextForm(formBtnNext2, formBtn3, 2, 3);
  e.preventDefault();
});

// Previous button listener of form 2
formBtnPrev2.addEventListener('click', function(e) {
  gotoNextForm(formBtnNext2, formBtn1, 2, 1);
  e.preventDefault();
});

// Button listener of form 3
formBtn3.addEventListener('click', function(e) {
  document.querySelector(`.step--3`).classList.remove('step-active');
  document.querySelector(`.step--4`).classList.add('step-active');
  formBtn3.parentElement.style.display = 'none';
  document.querySelector('.form--message').innerHTML = `
   <h1 class="form--message-text">Your account is successfully created </h1>
   `;
  e.preventDefault();
});
Enter fullscreen mode Exit fullscreen mode

在这里，我们首先将表单 ID 作为参数传递，然后使用preventDefault()事件上的方法来阻止页面重新加载。

监听器formBtn3略有不同，因为我们需要向用户显示一条消息。所以我们使用innerHTML追加内容的方式。



const gotoNextForm = (prev, next, stepPrev, stepNext) => {
  // Get form through the button
  const prevForm = prev.parentElement;
  const nextForm = next.parentElement;
  const nextStep = document.querySelector(`.step--${stepNext}`);
  const prevStep = document.querySelector(`.step--${stepPrev}`);
  // Add active/inactive classes to both previous and next form
  nextForm.classList.add('form-active');
  nextForm.classList.add('form-active-animate');
  prevForm.classList.add('form-inactive');
  // Change the active step element
  prevStep.classList.remove('step-active');
  nextStep.classList.add('step-active');
  // Remove active/inactive classes to both previous an next form
  setTimeout(() => {
    prevForm.classList.remove('form-active');
    prevForm.classList.remove('form-inactive');
    nextForm.classList.remove('form-active-animate');
  }, 1000);
};
Enter fullscreen mode Exit fullscreen mode

parentElement在这里，我们使用prevForm 和 nextForm 变量的属性遍历 DOM来选择form元素。

接下来，我们使用这些变量从步进器元素中选择表单步骤。

之后，我们将类添加form-active到form-active-animate下一个表单元素，以获得漂亮的动画效果。

接下来，我们使用 setTimeout() 在 1 秒后从表单中删除form-active、form-inactive和类。form-active-animate

步进式成型

太棒了！我们已经用 HTML、CSS 和 JavaScript 构建了一个超棒的步进表单。

您可以关注我的推特账号，以便在新文章发布时收到通知。

感谢阅读！

叽叽喳喳 博客 通讯 GitHub 领英 代码库 开发
文章来源：https://dev.to/ibrahima92/awesome-stepper-form-with-html-css-javascript-3l54
为什么选择 GraphQL？面向开...
Ruby 中的高效服务对象 让我们...