So erstellen Sie mehrstufige Formen mit Vanille-JavaScript und CSS-CSS-Tutorial-php.cn

How to Create Multi-Step Forms With Vanilla JavaScript and CSS

mehrstufige Formen sind eine gute Wahl, wenn Ihre Form groß ist und viele Kontrollen aufweist. Niemand möchte auf einem mobilen Gerät durch ein super langes Formular scrollen. Durch die Gruppierung von Steuerelementen auf Screen-by-Screen können wir die Erfahrung des Ausfüllens langer, komplexer Formen verbessern.

Aber wann haben Sie das letzte Mal eine mehrstufige Form entwickelt? Klingt dir das überhaupt Spaß? Es gibt so viel zu denken und so viele bewegliche Teile, die verwaltet werden müssen, dass ich Ihnen nicht die Schuld geben würde, auf eine Formbibliothek oder sogar eine Art von Formwidget zurückzugreifen, das alles für Sie umgeht.

Aber es kann eine gute Übung sein und eine großartige Möglichkeit sein, die Grundlagen zu polieren. Ich zeige Ihnen, wie ich mein erstes mehrstufiges Formular erstellt habe, und ich hoffe, Sie werden nicht nur sehen, wie zugänglich es sein kann, sondern sogar Bereiche, um meine Arbeit noch besser zu machen.

wir werden zusammen die Struktur durchgehen. Wir werden eine Bewerbung erstellen, von der ich denke, dass viele von uns sich auf diese letzten Tage beziehen können. Ich werde zuerst die Basislinien -HTML, CSS und JavaScript abrufen und dann überprüft, ob die Zugänglichkeit und Validierung zugänglich ist.

Ich habe ein Github -Repo für den endgültigen Code erstellt, wenn Sie sich auf dem Weg darauf verweisen möchten.

Beispielcode erhalten

Die Struktur einer mehrstufigen Form

Unser Bewerbungsformular enthält vier Abschnitte, von denen das letzte eine zusammenfassende Ansicht ist, in der wir dem Benutzer alle Antworten zeigen, bevor er sie einreicht. Um dies zu erreichen, teilen wir die HTML in vier Abschnitte, die jeweils mit einer ID identifiziert wurden, und fügen am Ende der Seite die Navigation hinzu. Ich gebe Ihnen diese Basis -HTML im nächsten Abschnitt.

Navigieren im Benutzer, um sich über Abschnitte zu bewegen, bedeutet, dass wir auch einen visuellen Indikator für den Schritt angeben und wie viele Schritte übrig bleiben. Dieser Indikator kann ein einfacher dynamischer Text sein, der entsprechend dem aktiven Schritt oder einem schickeren Fortschrittsbalken -Indikator -Typ aktualisiert wird. Wir werden die ersteren tun, um die Dinge einfach und konzentrieren sich auf die mehrstufige Natur der Form.,

Die Struktur und die Grundstile

Wir konzentrieren uns mehr auf die Logik, aber ich werde die Code -Snippets und einen Link zum vollständigen Code am Ende angeben.

Beginnen wir zunächst einen Ordner, um unsere Seiten zu halten. Erstellen Sie dann eine Index.html -Datei und fügen Sie Folgendes ein:

Öffnen Sie HTML

<form >
  <section  >
    <div >
      <div >
        <label for="name">Name <span style="color: red;">*</span></label>
        <input type="text"  name="name" placeholder="Enter your name">
      </div>

      <div >
        <label for="idNum">ID number <span style="color: red;">*</span></label>
        <input type="number"  name="idNum" placeholder="Enter your ID number">
      </div>
    </div>

    <div >
      <div >
        <label for="email">Email <span style="color: red;">*</span></label>
        <input type="email"  name="email" placeholder="Enter your email">
      </div>

      <div >
        <label for="birthdate">Date of Birth <span style="color: red;">*</span></label>
        <input type="date"  name="birthdate" max="2006-10-01" min="1924-01-01">
      </div>
    </div>
  </section>

  <section  >
    <div >
      <label for="document">Upload CV <span style="color: red;">*</span></label>
      <input type="file" name="document" >
    </div>

    <div >
      <label for="department">Department <span style="color: red;">*</span></label>
      <select  name="department">
        <option value="">Select a department</option>
        <option value="hr">Human Resources</option>
        <option value="it">Information Technology</option>
        <option value="finance">Finance</option>
      </select>
    </div>
  </section>

  <section  >
    <div >
      <label for="skills">Skills (Optional)</label>
      <textarea  name="skills" rows="4" placeholder="Enter your skills"></textarea>
    </div>

    <div >
      <input type="checkbox" name="terms" >
      <label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label>
    </div>

    <button  type="submit">Confirm and Submit</button>
  </section>
  
  <div >
    <button type="button" >Previous</button>
    <span ></span>
    <button type="button" >Next</button>
  </div>
</form>

<script src="script.js"></script>

Nach dem Login kopieren

Wenn Sie sich den Code ansehen, können Sie drei Abschnitte und die Navigationsgruppe sehen. Die Abschnitte enthalten Formulareingaben und keine native Formularvalidierung. Dies soll uns eine bessere Kontrolle über das Anzeigen der Fehlermeldungen geben, da die native Formularvalidierung nur ausgelöst wird, wenn Sie auf die Schaltfläche Senden senden.

Erstellen Sie als nächstes eine stiles.css -Datei und fügen Sie sie ein:

Öffnen Sie Basisstile

<form >
  <section  >
    <div >
      <div >
        <label for="name">Name <span style="color: red;">*</span></label>
        <input type="text"  name="name" placeholder="Enter your name">
      </div>

      <div >
        <label for="idNum">ID number <span style="color: red;">*</span></label>
        <input type="number"  name="idNum" placeholder="Enter your ID number">
      </div>
    </div>

    <div >
      <div >
        <label for="email">Email <span style="color: red;">*</span></label>
        <input type="email"  name="email" placeholder="Enter your email">
      </div>

      <div >
        <label for="birthdate">Date of Birth <span style="color: red;">*</span></label>
        <input type="date"  name="birthdate" max="2006-10-01" min="1924-01-01">
      </div>
    </div>
  </section>

  <section  >
    <div >
      <label for="document">Upload CV <span style="color: red;">*</span></label>
      <input type="file" name="document" >
    </div>

    <div >
      <label for="department">Department <span style="color: red;">*</span></label>
      <select  name="department">
        <option value="">Select a department</option>
        <option value="hr">Human Resources</option>
        <option value="it">Information Technology</option>
        <option value="finance">Finance</option>
      </select>
    </div>
  </section>

  <section  >
    <div >
      <label for="skills">Skills (Optional)</label>
      <textarea  name="skills" rows="4" placeholder="Enter your skills"></textarea>
    </div>

    <div >
      <input type="checkbox" name="terms" >
      <label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label>
    </div>

    <button  type="submit">Confirm and Submit</button>
  </section>
  
  <div >
    <button type="button" >Previous</button>
    <span ></span>
    <button type="button" >Next</button>
  </div>
</form>

<script src="script.js"></script>

Nach dem Login kopieren

Öffnen Sie die HTML-Datei im Browser, und Sie sollten im folgenden Screenshot so etwas wie das zweispaltige Layout erhalten, komplett mit der aktuellen Seitenanzeige und Navigation.

Funktionalität mit Vanille JavaScript

hinzufügen

Erstellen Sie nun eine Skript.js -Datei im selben Verzeichnis wie die HTML- und CSS -Dateien und fügen Sie das folgende JavaScript ein:

Öffnen Sie Basiskripte

:root {
  --primary-color: #8c852a;
  --secondary-color: #858034;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
  max-width: 600px;
}

h1 {
  text-align: center;
}

form {
  background: #fff;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.form-group {
  display: flex;
  gap: 7%;

}

.form-group > div {
  width: 100%;
}

input:not([type="checkbox"]),
select,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-control {
  margin-bottom: 15px;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  color: white;
  background-color: var(--primary-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;

}

button:hover {
  background-color: var(--secondary-color);
}

.group-two, .group-three {
  display: none;
}

.arrows {
  display: flex;
  justify-content: space-between
  align-items: center;
  margin-top: 10px;
}

#navLeft, #navRight {
  width: fit-content;
}

@media screen and (max-width: 600px) {
  .form-group {
    flex-direction: column;
  }
}

Nach dem Login kopieren

Dieses Skript definiert eine Methode, die den Abschnitt abhängig von den Formstep -Werten zeigt und verbirgt, die den IDs der Formularabschnitte entsprechen. Es aktualisiert Stepinfo mit dem aktuellen aktiven Abschnitt des Formulars. Dieser dynamische Text fungiert als Fortschrittsindikator für den Benutzer.

Es wird dann eine Logik hinzugefügt, die darauf wartet, dass die Seite geladen und auf Ereignisse zu den Navigationsschaltflächen klickt, um das Radfahren durch die verschiedenen Formularabschnitte zu ermöglichen. Wenn Sie Ihre Seite aktualisieren, sehen Sie, dass das mehrstufige Formular wie erwartet funktioniert.

Multi-Step-Formnavigation

Lassen Sie uns tiefer in den oben genannten JavaScript -Code eintauchen. In der Funktion updateStepVisibility () verbergen wir zunächst alle Abschnitte, um einen sauberen Schiefer zu erhalten:

const stepInfo = document.getElementById("stepInfo");
const navLeft = document.getElementById("navLeft");
const navRight = document.getElementById("navRight");
const form = document.getElementById("myForm");
const formSteps = ["one", "two", "three"];

let currentStep = 0;

function updateStepVisibility() {
  formSteps.forEach((step) => {
    document.getElementById(step).style.display = "none";
  });

  document.getElementById(formSteps[currentStep]).style.display = "block";
  stepInfo.textContent = `Step ${currentStep + 1} of ${formSteps.length}`;
  navLeft.style.display = currentStep === 0 ? "none" : "block";
  navRight.style.display =
  currentStep === formSteps.length - 1 ? "none" : "block";
}

document.addEventListener("DOMContentLoaded", () => {
  navLeft.style.display = "none";
  updateStepVisibility();
  navRight.addEventListener("click", () => {
    if (currentStep < formSteps.length - 1) {
      currentStep++;
      updateStepVisibility();
    }
  });

  navLeft.addEventListener("click", () => {
    if (currentStep > 0) {
      currentStep--;
      updateStepVisibility();
    }
  });
});

Nach dem Login kopieren

Dann zeigen wir den aktuell aktiven Abschnitt:

formSteps.forEach((step) => {
  document.getElementById(step).style.display = "none";
});

Nach dem Login kopieren

Als nächstes aktualisieren wir den Text, den Indikatoren durch das Formular durchführen:

document.getElementById(formSteps[currentStep]).style.display = "block";`

Nach dem Login kopieren

Schließlich verbergen wir die vorherige Taste, wenn wir uns im ersten Schritt befinden und die nächste Taste ausblenden, wenn wir uns im letzten Abschnitt befinden:

stepInfo.textContent = `Step ${currentStep + 1} of ${formSteps.length}`;

Nach dem Login kopieren

Schauen wir uns an, was passiert, wenn die Seite geladen wird. Wir verbergen zuerst die vorherige Taste, da das Formular im ersten Abschnitt geladen wird:

navLeft.style.display = currentStep === 0 ? "none" : "block";
navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";

Nach dem Login kopieren

Dann schnappen wir uns die nächste Schaltfläche und fügen ein Klickereignis hinzu, das die aktuelle Schrittzahl bedingt erhöht und dann die Funktion updateStepepvisibility () aufruft, die dann den neuen Abschnitt aktualisiert:

document.addEventListener("DOMContentLoaded", () => {
navLeft.style.display = "none";
updateStepVisibility();

Nach dem Login kopieren

Schließlich schnappen wir uns den vorherigen Knopf und tun dasselbe, aber umgekehrt. Hier verringern wir die Schrittzahl bedingt und rufen die UpdateStepvisibility () an:

navRight.addEventListener("click", () => {
  if (currentStep < formSteps.length - 1) {
    currentStep++;
    updateStepVisibility();
  }
});

Nach dem Login kopieren

Handhabungsfehler

Haben Sie jemals gute 10 Minuten damit verbracht, ein Formular auszufüllen, um es einzureichen und vage Fehler zu bekommen, die Ihnen sagen, dass Sie dies und das korrigieren sollen? Ich bevorzuge es, wenn mir ein Formular sofort sagt, dass etwas nicht stimmt, damit ich es vor korrigieren kann. Ich komme jemals zum Senden -Taste. Das werden wir in unserer Form tun.

Unser Prinzip ist es klar anzugeben, welche Steuerelemente Fehler haben und aussagekräftige Fehlermeldungen angeben. Löschen Sie Fehler, wenn der Benutzer die erforderlichen Aktionen ausführt. Fügen wir unserem Formular eine gewisse Validierung hinzu. Nehmen wir zunächst die erforderlichen Eingabelemente und fügen Sie dies den vorhandenen hinzu:

navLeft.addEventListener("click", () => {
  if (currentStep > 0) {
    currentStep--;
    updateStepVisibility();
  }
});

Nach dem Login kopieren

Fügen Sie dann eine Funktion hinzu, um die Schritte zu validieren:

Öffnen Sie das Validierungsskript

<form >
  <section  >
    <div >
      <div >
        <label for="name">Name <span style="color: red;">*</span></label>
        <input type="text"  name="name" placeholder="Enter your name">
      </div>

      <div >
        <label for="idNum">ID number <span style="color: red;">*</span></label>
        <input type="number"  name="idNum" placeholder="Enter your ID number">
      </div>
    </div>

    <div >
      <div >
        <label for="email">Email <span style="color: red;">*</span></label>
        <input type="email"  name="email" placeholder="Enter your email">
      </div>

      <div >
        <label for="birthdate">Date of Birth <span style="color: red;">*</span></label>
        <input type="date"  name="birthdate" max="2006-10-01" min="1924-01-01">
      </div>
    </div>
  </section>

  <section  >
    <div >
      <label for="document">Upload CV <span style="color: red;">*</span></label>
      <input type="file" name="document" >
    </div>

    <div >
      <label for="department">Department <span style="color: red;">*</span></label>
      <select  name="department">
        <option value="">Select a department</option>
        <option value="hr">Human Resources</option>
        <option value="it">Information Technology</option>
        <option value="finance">Finance</option>
      </select>
    </div>
  </section>

  <section  >
    <div >
      <label for="skills">Skills (Optional)</label>
      <textarea  name="skills" rows="4" placeholder="Enter your skills"></textarea>
    </div>

    <div >
      <input type="checkbox" name="terms" >
      <label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label>
    </div>

    <button  type="submit">Confirm and Submit</button>
  </section>
  
  <div >
    <button type="button" >Previous</button>
    <span ></span>
    <button type="button" >Next</button>
  </div>
</form>

<script src="script.js"></script>

Nach dem Login kopieren

Hier prüfen wir, ob jede erforderliche Eingabe einen gewissen Wert hat und ob die E -Mail -Eingabe eine gültige Eingabe hat. Dann setzen wir den isvalid boolean entsprechend. Wir nennen auch eine Duschror () -Funktion, die wir noch nicht definiert haben.

Fügen Sie diesen Code über der Funktion validatestep () ein:

:root {
  --primary-color: #8c852a;
  --secondary-color: #858034;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
  max-width: 600px;
}

h1 {
  text-align: center;
}

form {
  background: #fff;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.form-group {
  display: flex;
  gap: 7%;

}

.form-group > div {
  width: 100%;
}

input:not([type="checkbox"]),
select,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-control {
  margin-bottom: 15px;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  color: white;
  background-color: var(--primary-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;

}

button:hover {
  background-color: var(--secondary-color);
}

.group-two, .group-three {
  display: none;
}

.arrows {
  display: flex;
  justify-content: space-between
  align-items: center;
  margin-top: 10px;
}

#navLeft, #navRight {
  width: fit-content;
}

@media screen and (max-width: 600px) {
  .form-group {
    flex-direction: column;
  }
}

Nach dem Login kopieren

Fügen Sie jetzt die folgenden Stile zum Stylesheet hinzu:

Offene Validierungsstile

const stepInfo = document.getElementById("stepInfo");
const navLeft = document.getElementById("navLeft");
const navRight = document.getElementById("navRight");
const form = document.getElementById("myForm");
const formSteps = ["one", "two", "three"];

let currentStep = 0;

function updateStepVisibility() {
  formSteps.forEach((step) => {
    document.getElementById(step).style.display = "none";
  });

  document.getElementById(formSteps[currentStep]).style.display = "block";
  stepInfo.textContent = `Step ${currentStep + 1} of ${formSteps.length}`;
  navLeft.style.display = currentStep === 0 ? "none" : "block";
  navRight.style.display =
  currentStep === formSteps.length - 1 ? "none" : "block";
}

document.addEventListener("DOMContentLoaded", () => {
  navLeft.style.display = "none";
  updateStepVisibility();
  navRight.addEventListener("click", () => {
    if (currentStep < formSteps.length - 1) {
      currentStep++;
      updateStepVisibility();
    }
  });

  navLeft.addEventListener("click", () => {
    if (currentStep > 0) {
      currentStep--;
      updateStepVisibility();
    }
  });
});

Nach dem Login kopieren

Wenn Sie das Formular aktualisieren, werden Sie feststellen

Schließlich möchten wir Echtzeit-Fehlerbehandlungen hinzufügen, damit die Fehler verschwinden, wenn der Benutzer mit der Eingabe der richtigen Informationen beginnt. Fügen Sie diese Funktion unter der Funktion validatestep () hinzu:

Öffnen Sie das Echtzeit-Validierungsskript

formSteps.forEach((step) => {
  document.getElementById(step).style.display = "none";
});

Nach dem Login kopieren

Diese Funktion löscht die Fehler, wenn die Eingabe nicht mehr ungültig ist, indem Eingaben anhören und Ereignisse ändern und dann eine Funktion zum Löschen der Fehler aufrufen. Fügen Sie die Funktion clearError () unterhalb der Duschror () eins ein:

document.getElementById(formSteps[currentStep]).style.display = "block";`

Nach dem Login kopieren

Und jetzt klären die Fehler, wenn der Benutzer im richtigen Wert tippt:

Die Multi-Step-Form behandelt jetzt Fehler anmutig. Wenn Sie sich dafür entscheiden, die Fehler bis zum Ende des Formulars zu halten, springen Sie zumindest den Benutzer zurück in die Fehlerregelung und zeigen Sie einige Hinweise darauf an, wie viele Fehler sie beheben müssen.

Handhabungsformular -Einreichung

In einem mehrstufigen Formular ist es wertvoll, dem Benutzer eine Zusammenfassung aller Antworten am Ende vor dem Einreichen zu zeigen und ihm die Option anzubieten, ihre Antworten gegebenenfalls zu bearbeiten. Die Person kann die vorherigen Schritte nicht sehen, ohne rückwärts zu navigieren. Daher zeigt eine Zusammenfassung im letzten Schritt die Sicherheit und die Möglichkeit, Fehler zu korrigieren.

Fügen wir dem Markup einen vierten Abschnitt hinzu, um diese zusammenfassende Ansicht zu speichern und die Schaltfläche Senden in sie zu verschieben. Fügen Sie dies direkt unter dem dritten Abschnitt in index.html ein:

Öffnen Sie HTML

stepInfo.textContent = `Step ${currentStep + 1} of ${formSteps.length}`;

Nach dem Login kopieren

Aktualisieren Sie dann den Formstep in Ihrem JavaScript, um es zu lesen:

navLeft.style.display = currentStep === 0 ? "none" : "block";
navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";

Nach dem Login kopieren

Fügen Sie schließlich die folgenden Klassen zu Styles hinzu.css:

document.addEventListener("DOMContentLoaded", () => {
navLeft.style.display = "none";
updateStepVisibility();

Nach dem Login kopieren

Fügen Sie nun Folgendes an die Spitze der script.js -Datei hinzu, in der die anderen Consts:

sind

navRight.addEventListener("click", () => {
  if (currentStep < formSteps.length - 1) {
    currentStep++;
    updateStepVisibility();
  }
});

Nach dem Login kopieren

Fügen Sie diese Funktion in scripts.js:

hinzu

navLeft.addEventListener("click", () => {
  if (currentStep > 0) {
    currentStep--;
    updateStepVisibility();
  }
});

Nach dem Login kopieren

Dies fügt die Eingabewerte dynamisch in den Zusammenfassungsabschnitt des Formulars ein, schneidet die Dateinamen ab und bietet einen Fallback -Text für die nicht erforderliche Eingabe.

Dann aktualisieren

Fügen Sie dies schließlich zum Domcontent -Ereignis -Listener hinzu:

const nameInput = document.getElementById("name");
const idNumInput = document.getElementById("idNum");
const emailInput = document.getElementById("email");
const birthdateInput = document.getElementById("birthdate")
const documentInput = document.getElementById("document");
const departmentInput = document.getElementById("department");
const termsCheckbox = document.getElementById("terms");
const skillsInput = document.getElementById("skills");

Nach dem Login kopieren

<form >
  <section  >
    <div >
      <div >
        <label for="name">Name <span style="color: red;">*</span></label>
        <input type="text"  name="name" placeholder="Enter your name">
      </div>

      <div >
        <label for="idNum">ID number <span style="color: red;">*</span></label>
        <input type="number"  name="idNum" placeholder="Enter your ID number">
      </div>
    </div>

    <div >
      <div >
        <label for="email">Email <span style="color: red;">*</span></label>
        <input type="email"  name="email" placeholder="Enter your email">
      </div>

      <div >
        <label for="birthdate">Date of Birth <span style="color: red;">*</span></label>
        <input type="date"  name="birthdate" max="2006-10-01" min="1924-01-01">
      </div>
    </div>
  </section>

  <section  >
    <div >
      <label for="document">Upload CV <span style="color: red;">*</span></label>
      <input type="file" name="document" >
    </div>

    <div >
      <label for="department">Department <span style="color: red;">*</span></label>
      <select  name="department">
        <option value="">Select a department</option>
        <option value="hr">Human Resources</option>
        <option value="it">Information Technology</option>
        <option value="finance">Finance</option>
      </select>
    </div>
  </section>

  <section  >
    <div >
      <label for="skills">Skills (Optional)</label>
      <textarea  name="skills" rows="4" placeholder="Enter your skills"></textarea>
    </div>

    <div >
      <input type="checkbox" name="terms" >
      <label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label>
    </div>

    <button  type="submit">Confirm and Submit</button>
  </section>
  
  <div >
    <button type="button" >Previous</button>
    <span ></span>
    <button type="button" >Next</button>
  </div>
</form>

<script src="script.js"></script>

Nach dem Login kopieren

Ausführen des Formulars sollten Sie sehen, dass der Zusammenfassungsabschnitt alle Eingabeteile anzeigt und dem Benutzer es ermöglicht, alle zu bearbeiten, bevor Sie die Informationen senden:

Und jetzt können wir unser Formular einreichen:

:root {
  --primary-color: #8c852a;
  --secondary-color: #858034;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
  max-width: 600px;
}

h1 {
  text-align: center;
}

form {
  background: #fff;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.form-group {
  display: flex;
  gap: 7%;

}

.form-group > div {
  width: 100%;
}

input:not([type="checkbox"]),
select,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-control {
  margin-bottom: 15px;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  color: white;
  background-color: var(--primary-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;

}

button:hover {
  background-color: var(--secondary-color);
}

.group-two, .group-three {
  display: none;
}

.arrows {
  display: flex;
  justify-content: space-between
  align-items: center;
  margin-top: 10px;
}

#navLeft, #navRight {
  width: fit-content;
}

@media screen and (max-width: 600px) {
  .form-group {
    flex-direction: column;
  }
}

Nach dem Login kopieren

Mit unserem mehrstufigen Formular kann der Benutzer jetzt alle Informationen bearbeiten und sehen, die er vor dem Senden vorliegt.

Zugänglichkeitstipps

Multi-Step-Formulare zugänglich machen beginnt mit den Grundlagen: Verwendung semantischer HTML. Dies ist die halbe Schlacht. Es folgt genau die Verwendung geeigneter Formetiketten.

Andere Möglichkeiten, um Formulare zugänglicher zu machen, sind zugänglicher, um Elementen genügend Platz zu geben, die auf kleinen Bildschirmen geklickt werden müssen, und die Navigations- und Fortschrittsindikatoren aus sinnvolle Beschreibungen zu geben.

Feedback für den Benutzer ist ein wichtiger Teil davon. Es ist nicht großartig, das Feedback des Benutzer-Benutzer-Benutzers nach einer bestimmten Zeit zu automatisch zu diskutieren, aber der Benutzer kann es selbst entlassen. Es ist auch wichtig, auf Kontrast und Schriftauswahl zu achten, da beide sich auf die lesbare Form auswirken.

Lassen Sie uns die folgenden Anpassungen am Markup für mehr technische Zugänglichkeit vornehmen:

ARIA-erregt = "True" zu allen Eingaben mit Ausnahme der Fähigkeiten eins.
rollen hinzufügen = "status" aria-live = "höflich" zum .stepinfo.
Hier fügen und entfernen wir programmgesteuert Attribute, die die Eingabe explizit mit seiner Fehlerspanne verbinden, und zeigen, dass er sich in einem ungültigen Zustand befindet.

Fügen wir schließlich den Fokus auf die erste Eingabe jedes Abschnitts hinzu. Fügen Sie den folgenden Code zum Ende der Funktion updateStepepvisibility () hinzu:

const stepInfo = document.getElementById("stepInfo");
const navLeft = document.getElementById("navLeft");
const navRight = document.getElementById("navRight");
const form = document.getElementById("myForm");
const formSteps = ["one", "two", "three"];

let currentStep = 0;

function updateStepVisibility() {
  formSteps.forEach((step) => {
    document.getElementById(step).style.display = "none";
  });

  document.getElementById(formSteps[currentStep]).style.display = "block";
  stepInfo.textContent = `Step ${currentStep + 1} of ${formSteps.length}`;
  navLeft.style.display = currentStep === 0 ? "none" : "block";
  navRight.style.display =
  currentStep === formSteps.length - 1 ? "none" : "block";
}

document.addEventListener("DOMContentLoaded", () => {
  navLeft.style.display = "none";
  updateStepVisibility();
  navRight.addEventListener("click", () => {
    if (currentStep < formSteps.length - 1) {
      currentStep++;
      updateStepVisibility();
    }
  });

  navLeft.addEventListener("click", () => {
    if (currentStep > 0) {
      currentStep--;
      updateStepVisibility();
    }
  });
});

Nach dem Login kopieren

Und damit ist die mehrstufige Form viel zugänglicher.

Schlussfolgerung

Da wir gehen, ein vierteiliges mehrstufiges Formular für eine Bewerbung! Wie ich oben in diesem Artikel sagte, gibt es viel zu jonglieren-so viel, dass ich Ihnen nicht vorwerfen würde, dass ich nach einer außergewöhnlichen Lösung gesucht habe.

formSteps.forEach((step) => {
  document.getElementById(step).style.display = "none";
});

Nach dem Login kopieren

Aber wenn Sie ein mehrstufiges Formular von Hand rollen müssen, sehen Sie hoffentlich, dass es sich nicht um ein Todesurteil handelt. Es gibt einen glücklichen Weg, der Sie mit Navigation und Validierung dorthin bringt, ohne sich von guten, zugänglichen Praktiken abzuwenden.

Und so bin ich so angesprochen! Ich nahm dies wieder als persönliche Herausforderung an, um zu sehen, wie weit ich kommen kann, und ich bin ziemlich zufrieden damit. Aber ich würde gerne wissen, ob Sie zusätzliche Möglichkeiten sehen, um dies auf die Benutzererfahrung und die Rücksichtnahme auf die Zugänglichkeit zu machen.

referenzen

Hier sind einige relevante Links, auf die ich beim Schreiben dieses Artikels Bezug genommen habe:

wie man ein Webform (MDN) strukturiert
mehrseitige Formulare (w3c.org)
Erstellen Sie zugängliche Formulare (A11Y -Projekt)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mehrstufige Formen mit Vanille-JavaScript und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!