如何创建：多步骤表单

学习如何创建一个多步骤的表单。

表单向导 - 多步骤表单：

Essayer vous-même

第一步 - 添加 HTML：

<form id="regForm" action="">
<h1>Register:</h1>
<!-- 每个步骤在表单中都有一个“标签页”： -->
<div class="tab">Name:</div>
  <p><input placeholder="First name..." oninput="this.className = ''"></p>
  <p><input placeholder="Last name..." oninput="this.className = ''"></p>
</div>
<div class="tab">Contact Info:</div>
  <p><input placeholder="E-mail..." oninput="this.className = ''"></p>
  <p><input placeholder="Phone..." oninput="this.className = ''"></p>
</div>
<div class="tab">Birthday:</div>
  <p><input placeholder="dd" oninput="this.className = ''"></p>
  <p><input placeholder="mm" oninput="this.className = ''"></p>
  <p><input placeholder="yyyy" oninput="this.className = ''"></p>
</div>
<div class="tab">Informations de connexion:</div>
  <p><input placeholder="Nom d'utilisateur..." oninput="this.className = ''"></p>
  <p><input placeholder="Mot de passe..." oninput="this.className = ''"></p>
</div>
<div style="overflow:auto;">
  <div style="float:right;">
    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Précédent</button>
    <button type="button" id="nextBtn" onclick="nextPrev(1)">Suivant</button>
  </div>
</div>
/* Utilisé pour indiquer les cercles des étapes du formulaire : */
<div style="text-align:center;margin-top:40px;">
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
</div>
</form>

Deuxième étape - Ajouter CSS :

Définir les styles des éléments du formulaire :

/* Définir les styles pour le formulaire : */
#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  padding: 40px;
  width: 70%;
  min-width: 300px;
{}
/* Définir les styles pour les champs d'entrée : */
input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
{}
/* Marquer les champs d'entrée avec des erreurs de validation : */
input.invalid {
  background-color: #ffdddd;
{}
/* Masquer par défaut toutes les étapes : */
.tab {
  display: none;
{}
/* Créer des cercles pour indiquer les étapes du formulaire : */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
{}
/* Marquer l'étape actuelle : */
.step.active {
  opacity: 1;
{}
/* Marquer les étapes terminées et valides : */
.step.finish {
  background-color: #04AA6D;
{}

Étape 3 - Ajouter JavaScript :

var currentTab = 0; // L'onglet actuel est configuré comme le premier onglet (0)
showTab(currentTab); // Afficher l'onglet actuel
function showTab(n) {
  // Cette fonction affichera l'onglet spécifié du formulaire ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... et corriger les boutons précédent/suivant :
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  }
    document.getElementById("prevBtn").style.display = "inline";
  {}
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  }
    document.getElementById("nextBtn").innerHTML = "Next";
  {}
  // ... et exécuter une fonction pour afficher le bon indicateur de progression : 
  fixStepIndicator(n)
{}
function nextPrev(n) {
  // Cette fonction déterminera quel onglet doit être affiché :
  var x = document.getElementsByClassName("tab");
  // Si tout champ du onglet actuel est invalide, quitter la fonction :
  if (n == 1 && !validateForm()) return false;
  // Cacher l'onglet actuel :
  x[currentTab].style.display = "none";
  // Augmentez ou diminuez la page d'étiquette actuelle de 1 :
  currentTab = currentTab + n;
  // Si vous êtes arrivé à la fin du tableau... :
  if (currentTab >= x.length) {
    //... Le formulaire sera soumis :
    document.getElementById("regForm").submit();
    return false;
  {}
  // Sinon, affichez la page d'étiquette correcte :
  showTab(currentTab);
{}
function validateForm() {
  // Cette fonction traite la validation des champs du formulaire
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // Parcourez la boucle de chaque champ d'entrée de la page actuelle :
  for (i = 0; i < y.length; i++) {
    // Si le champ est vide...
    if (y[i].value == "") {
      // Ajoutez la classe "invalid" à ce champ :
      y[i].className += " invalid";
      // Et mettez l'état valide actuel à false :
      valid = false;
    {}
  {}
  // Si l'état valide est true, marquez cette étape comme terminée et valide :
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  {}
  return valid; // retourne l'état valide
{}
function fixStepIndicator(n) {
  // Cette fonction supprime la classe "active" de toutes les étapes...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  {}
  //... Ajoutez la classe "active" à l'étape actuelle :
  x[n].className += " active";
{}

Essayer vous-même