Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Erstellen Sie eine mehrstufige Formularschnittstelle

by
Length:LongLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Form Usability ist ein unglaublich wichtiges Thema im Webdesign. Als eine der primären Eingabeschnittstellen, die Benutzern zur Verfügung gestellt wird, ist die Benutzerfreundlichkeit eines Formulars für eine gute Benutzererfahrung unerlässlich.

Heute erstellen wir ein mehrteiliges Formular mit Validierung und Animation. Wir werden viel Boden zurücklegen, also schnallen Sie sich an!


Bilden Sie erstklassige Best Practices

Das Design der Formularschnittstelle ist eine Sammlung von Hindernissen für die Benutzerfreundlichkeit. Bevor wir beginnen, lassen Sie uns über einige Best Practices für Formulare sprechen.

Lassen Sie Ihre Benutzer nicht zu stark denken

Formulare sind im Allgemeinen nicht der Ort, an dem eine einzigartige Interaktion gefördert wird. Gute Formulare bieten offensichtliche Navigationstechniken und volle Transparenz. Gute Formen sind gut beschriftet und leicht zu navigieren.

Mach dich nicht zu schick

Es ist wichtig, nicht zu weit vom Standardverhalten der Formulare abzuweichen. Es gibt Standards, die die Grundlage für das Standardverhalten von Formularen bilden.  Abweichungen von diesen Standards können sich negativ auf die Verfügbarkeit auswirken. Denken Sie daher daran, diese Standardstile beizubehalten.

Denken Sie daran, dass der Benutzer nicht bleiben muss

Der Benutzer Ihres Formulars muss nicht bleiben. Sie entscheiden sich zu bleiben. Das Ausfüllen eines Formulars ist eine Pflicht, also machen Sie es einfach.  (Wenn möglich, mache es Spaß!) Verwirren Sie nicht oder fordern Sie den Benutzer nicht an; Bauen Sie stattdessen einen Dialog über die Fragen auf, die das Formular stellt. Höflich sein.

Wann sind Mehrsektionstechniken anzuwenden?

Formen mit mehreren Abschnitten sind sicherlich manchmal eine gute Technik. Es gibt keine Antwort auf "Wie viele Eingaben dauert es, bis ich die Form aufteilen sollte". Überlegen Sie sich immer, ob die Aufteilung des Formulars in einzelne Abschnitte die Benutzerfreundlichkeit verbessern oder beeinträchtigen kann.  Zweitens überlegen Sie, ob es andere Aspekte des Interaktionsdesigns unterstützt oder behindert.

Wenn Sie Formulare mit sehr unterschiedlichen Abschnitten haben, lohnt es sich möglicherweise, diese in mehrere Teile zu unterteilen. Checkout-Prozesse sind ein bekanntes Beispiel dafür.  (Persönliche Informationen, Versandinformationen, Zahlungsinformationen und Bestätigungen sind sehr unterschiedlich und in der Regel in wesentlichen Teilen.)


Planung der Interaktion

Wir erstellen ein Anmeldeformular mit beliebigen Feldern. Wir müssen wissen, in welchem Bereich wir uns gerade befinden. Daher benötigen wir oben im Formular einen Indikator. Wir möchten unsere Formulare horizontal übergehen und von rechts nach links gleiten.  Um dies zu erreichen, werden die verschiedenen Abschnitte so eingestellt, dass sie die absolute Positionierung innerhalb eines "Fenster" -Elementes haben. Wir möchten auch zwei Knöpfe haben; Einer ist der normale Submit-Button. Der andere ist eine Schaltfläche "Nächster Abschnitt".


Der Markup

Hier ist unser Formular:

Das Markup ist ziemlich unkompliziert, aber reden wir über ein paar Teile davon.

  • Fieldsets: Fieldsets sind ein semantisches Element zum Gruppieren von Eingaben. das passt perfekt zu unserer Situation.
  • Klassennamen: jQuery Validate verwendet Klassen, um integrierte Typen zu definieren. Wir werden in einer Minute sehen, wie das funktioniert.
  • Die Felder sind beliebig. Zur Vereinfachung der Formatierung haben wir die Radioeingaben in ein Absatz-Tag verpackt.
  • Senden und Weiter-Schaltflächen: Das Ankertag mit einer Schaltflächenklasse wird verwendet, um zum nächsten Abschnitt zu gelangen. Die Übermittlungseingabe wird bei Bedarf über JavaScript angezeigt.

Die Stile (WENIG-Aromatisiert)

Das ist lang, mach dich bereit ..

Gehen wir den wichtigen Teil der Stile durch.

Überblick

Das Formular selbst wird auf eine bestimmte Breite festgelegt, zentriert mit margin: 0 auto und dann auf position: relative. Diese Positionierung ermöglicht die absolute Positionierung von untergeordneten Elementen, um sie relativ zum enthaltenen Formular absolut zu positionieren.  Das übergeordnete Formular enthält drei Haupttypen von Elementen: die Abschnittsregisterkarten und das Feldset "Fenster" sowie die Schaltflächen.

Die Abschnittslaschen werden relativ zum übergeordneten Element platziert und mit einem negativen oberen Rand nach oben gezogen. Wir kompensieren den Effekt auf den Rest des Layouts mit gleichem Rand.

Das Feldset "Fenster" ist so eingestellt, dass es relativ zum übergeordneten Formularelement absolut positioniert ist. Die Breite und Höhe sind beide auf 100% eingestellt.  Der Zweck dieses Fensters besteht darin, Elemente zu halten und sie dann auszublenden, wenn sie mit Überlauf aus den Rändern overflow: hidden. Im Formular konnten wir dies nicht tun, da wir die Indikator-Registerkarten beibehalten möchten.

Schließlich werden die Schaltflächenelemente (Ankertag und Übergabeeingabe) so gestaltet, dass sie in der rechten unteren Ecke des Formulars absolut positioniert sind, um 20 Pixel nach unten und rechts versetzt. Wir haben auch einen einfachen CSS-Übergang zu den Schaltflächenelementen hinzugefügt, um den Hintergrund beim Schweben zu verdunkeln.

Noch ein paar Anmerkungen

  • Feldsätze werden als Position position: absolute. Wir haben zwei Klassen für zwei Zustände und einen Standardzustand.  Der Standardzustand zieht das Fieldset links vom Formular ab. Die .current-Klasse setzt das Fieldset in den sichtbaren Bereich des Formulars, und schließlich schiebt die .next-Klasse das Fieldset auf der rechten Seite des Formulars ab.
  • Die aktuelle Klasse hat eine Deckkraft von 1; Die voreingestellten (und inhärent die .next) Status haben eine Deckkraft von 0.
  • Die Feldsätze zwischen diesen Klassen werden mit einfachen CSS-Übergängen animiert.
  • Die Klassen .error und .valid helfen beim Validierungsstil. Wir verwenden Merriweather Sans, eine Schriftart, die für die Verwendung über Google Webfonts frei verfügbar ist.

Das JavaScript

Hier ist der Teil, der die gesamte Interaktion zum Laufen bringt. Ein paar Anmerkungen, bevor wir den Code betrachten: Dieser Code hängt von jQuery und jQuery Validate ab.  jQuery validate ist ein Plugin, das schon sehr lange existiert und daher von Tausenden von Menschen getestet wurde.

Unsere grundlegende Strategie: Legen Sie einige Validierungsregeln für das Formular fest, einschließlich einer benutzerdefinierten Funktion zur Überprüfung einer Telefonnummer. Wir möchten, dass Benutzer in zuvor fertiggestellten Abschnitten zurück navigieren können.  Wir möchten, dass sie die Eingabetaste verwenden können, um zum nächsten Abschnitt zu gelangen. Wir möchten jedoch nicht zulassen, dass Benutzer zu nachfolgenden Abschnitten wechseln, bis die vorherigen Abschnitte abgeschlossen und gültig sind.

Wenn der Benutzer versucht, auf eine Registerkarte für einen Abschnitt zu klicken, der über die von ihm abgeschlossenen Abschnitte hinausgeht, möchten wir vermeiden, zu diesem Abschnitt zu navigieren.

Wir möchten auf Klassen (anstatt auf jQuery-Animationen) zurückgreifen, um zwischen Zuständen zu wechseln.

In Anbetracht dieser Dinge ist hier das abschließende JavaScript. (Hinweis: Wenn Sie nicht in Ihrer jQuery sind, kann dies ein wenig entmutigend sein. Bleiben Sie trotzdem dabei, und Sie werden lernen, indem Sie in den Code eintauchen.) Nach dem vollständigen Skript nehmen wir es an eine zeit und erklären was los ist.

Also gehen wir Stück für Stück.

Diese Funktion ist die Setup-Funktion für jQuery Validate. Zuerst sagen wir dem Plugin, dass es das Anmeldeformular annehmen und die Validierung anwenden soll.  Wenn die Validierung erfolgreich ist, fügen wir dem Label, das das Validierungs-Plugin nach dem Eingabeelement einfügt, eine gültige Klasse hinzu und ersetzen den Text durch das Häkchen "utf-8" .

Wir registrieren auch den Fehlerrückruf, obwohl wir in dieser Funktion eigentlich nichts tun. Das Nicht-Registrieren der Funktion scheint den gleichen Rückruf zu haben wie die Erfolgsfunktion im Fehlerfall. Wir setzen den onsubmit-Hook auf false. Dies liegt daran, dass durch Drücken der Eingabetaste automatisch das Formular übermittelt wird, wodurch standardmäßig die Überprüfung ausgelöst wird, um die Übermittlung ungültiger Formulare zu verhindern.  Das Verhindern des Standardverhaltens von Formularsenden verhindert die Formularüberprüfung nicht. Das Ergebnis ist, dass die Felder auf dem "nächsten" Bildschirm bereits Validierungsfehler aufweisen, obwohl das Formular nie gesendet wurde.

Diese Funktion überwacht das Keyup-Ereignis, das im Formular ausgelöst wird. Wenn die Taste, die gedrückt wurde, die Eingabetaste war (Schlüsselcode 13), führen wir die folgende Prüfung durch.  Wenn die nächste Schaltfläche noch sichtbar ist und der aktuelle Abschnitt gültig ist, verhindern Sie, dass das Standardverhalten der Eingabetaste gedrückt wird, während Sie sich in einem Formular befinden (Formularübermittlung).

Wir rufen dann nextSection() auf, wodurch das Formular zum nächsten Abschnitt übergeht. Wenn der aktuelle Abschnitt ungültige Eingaben enthält, werden diese Eingaben identifiziert und das Formular wird nicht fortgesetzt.  Wenn die nächste Schaltfläche nicht sichtbar ist, bedeutet dies, dass wir uns im letzten Abschnitt befinden (was in den nachfolgenden Funktionen angezeigt wird), und wir möchten das Standardverhalten (Formularübermittlung) zulassen.

Diese Funktionen sind unkompliziert. Wenn Sie die Taste mit der ID "Weiter" drücken, möchten wir zum nächsten Abschnitt übergehen. Denken Sie daran, dass die nextSection() - Funktion alle erforderlichen Prüfungen zur Formularvalidierung enthält.

Beim Übermittlungsereignis im Formular möchten wir die Formularübergabe vermeiden, wenn die nächste Schaltfläche sichtbar ist oder wenn das aktuelle Feldset nicht das letzte ist.

Die Funktion goToSection() ist das Arbeitspferd hinter der Navigation dieses Formulars. Es bedarf eines einzigen Arguments - des Index der Zielnavigation.  Die Funktion übernimmt alle Feldgruppen, deren Index größer als der übergebene Indexparameter ist, entfernt die current Klasse und fügt eine next Klasse hinzu. Dadurch werden die Elemente rechts vom Formular verschoben.

Als Nächstes entfernen wir die aktuelle Klasse aus allen Feldern, deren Index unter dem übergebenen Index liegt. Als Nächstes wählen wir das Listenelement aus, das dem übergebenen Index entspricht, und fügen eine aktuelle Klasse hinzu.

Anschließend entfernen wir die aktuelle Klasse von allen anderen Geschwisterlis. Wir legen ein Zeitlimit fest, nach dem wir die nächste Klasse entfernen und die aktuellen und aktiven Klassen zur Feldmenge hinzufügen, wobei der Index dem übergebenen Indexparameter entspricht.

Die aktive Klasse lässt uns wissen, dass der Benutzer wieder zu diesem bestimmten Abschnitt navigieren kann. Wenn der übergebene Indexparameter 3 ist (das letzte Feldset), blenden wir den nächsten Button aus und zeigen den Submit-Button.  Andernfalls möchten wir sicherstellen, dass der nächste Button sichtbar ist und der Submit-Button ausgeblendet ist. Dies ermöglicht es uns, die Schaltfläche "Senden" auszublenden, wenn das letzte Feldset nicht sichtbar ist.

Die nextSection() - Funktion ist im Grunde ein Wrapper um die goToSection() - Funktion. Wenn nextSection aufgerufen wird, wird einfach überprüft, ob wir uns nicht im letzten Abschnitt befinden.  Solange wir dies nicht sind, gehen wir zu dem Abschnitt mit einem Index, der dem Index des aktuellen Abschnitts plus eins entspricht.

Wir hören das Klickereignis für die Listenelemente. Diese Funktion prüft, ob das Listenelement über die aktive Klasse verfügt, die es erhält, sobald der Benutzer zu diesem Abschnitt des Formulars gelangt, indem er alle vorherigen Abschnitte ausfüllt.  Wenn das Listenelement über die Klasse verfügt, rufen wir goToSection auf und übergeben den Index dieses Listenelements.  Wenn der Benutzer auf ein Listenelement klickt, das einem Abschnitt entspricht, auf den er noch nicht zugreifen kann, weist der Browser ihn darauf hin, dass er die vorherigen Abschnitte abschließen muss, bevor er fortfahren kann.

Schließlich fügen wir eine Methode hinzu, die vom jQuery Validate-Plugin angegeben wurde und die eine Eingabe manuell überprüft. Wir werden nicht viel Zeit dafür aufwenden, da diese genaue Funktionalität in der Validate-Dokumentation zu finden ist.

Im Wesentlichen überprüfen wir, ob der Text, den der Benutzer in das Telefonfeld eingibt, mit dem regulären Ausdruck (der langen Reihe von Zahlen und Symbolen) übereinstimmt.  Wenn dies der Fall ist, ist die Eingabe gültig. Ist dies nicht der Fall, wird nach der Eingabe die Meldung "Bitte geben Sie eine gültige Telefonnummer" eingefügt. Sie können dieselbe Funktionalität verwenden, um nach Eingaben zu suchen (es muss kein regulärer Ausdruck verwendet werden).

Hinweis: Verwenden Sie dies nicht als Kennwortauthentifizierungsmethode. Es ist sehr unsicher und jeder kann die Quelle sehen, um das Passwort zu sehen.


Fazit

Wir haben semantisches HTML und einfaches WENIGES kombiniert mit minimalem JavaScript verwendet, um eine robuste Formularinteraktion aufzubauen. Die zum Erstellen dieses Formulars verwendeten Methoden, insbesondere die Verwendung von Klassennamen, um den Status zu identifizieren und Funktionalität und Animationen zu definieren, können in fast jedem interaktiven Projekt verwendet werden.  Dieselbe Funktionalität kann für Demonstrationsschritte, Spiele und alles andere verwendet werden, das von einfachen zustandsbasierten Interaktionen abhängt.

Was würden Sie sonst noch mit dieser Form machen? Welche Arten von Interaktionen haben Sie gefunden, um Benutzern einen natürlicheren Ablauf durch einen langwierigen Prozess zu ermöglichen, z. B. das Ausfüllen eines langen, mehrstufigen Formulars? Teilen Sie sie in den Kommentaren!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.