Advertisement
  1. Web Design
  2. HTML & CSS

Erstellung von den freundlichen, "Konversations" Web-Formulare

Scroll to top
Read Time: 11 min

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Webformulare sind ständig ein heißes Thema, wenn es um Webdesign und Benutzerinteraktion geht. Die Gründe dafür sind vielfältig, aber einer der offensichtlicheren Gründe ist, dass Formulare die grundlegendste Möglichkeit für einen Benutzer sind, Informationen in Ihre Anwendung einzugeben. In diesem Artikel werden einige Techniken erläutert, mit denen Ihre Formulare auf Eingaben des Benutzers reagieren und unnötig verwirrende oder überwältigende Elemente verschleiern können.

Lassen Sie uns anfangen!

Formulare sind wie Gespräche

Stellen Sie sich ein Formular als Gespräch vor, das Sie mit Ihrem Benutzer führen. In einem Gespräch tritt ein Hin und Her auf, bei dem jede Partei die andere Partei auffordert, zu antworten. Angenommen, Ihr Benutzer kommt, um sich anzumelden oder anzumelden. In beiden Fällen benötigen Sie ihre E-Mail-Adresse. Beginnen Sie also im Gespräch damit.

Geben Sie mir Ihre E-Mail-Adresse und ich überprüfe, ob Sie ein Konto haben. In diesem Fall werde ich Sie nach Ihrem Passwort fragen. Andernfalls können Sie mir ein neues Passwort geben und dieses Passwort dann mit mir bestätigen.

Wenn der Benutzer mit dem Formular auf die Seite gelangt, wird eine sehr klare Eingabeaufforderung angezeigt: "Wie lautet Ihre E-Mail-Adresse?"

Der nervige Kerl auf der Party

Wir alle kennen diesen Kerl. Er ist der Typ, den Sie meiden, weil er ununterbrochen spricht und nicht wirklich auf das zu hören scheint, was Sie zu sagen haben. Ehrlich gesagt ist dieser Typ wirklich überwältigend und ich bin mir nicht sicher, ob das jemandem gefällt. Sei nicht dieser Typ.

Lerne in deinen Formen eine Lektion von ihm. Anstatt Ihren Benutzer mit einer großen Anzahl von Eingaben zu konfrontieren, sollten Sie die Eingabearbeitslast des Benutzers reduzieren, indem Sie reaktive Eingaben erstellen.

Schauen wir uns ein einfaches Beispiel an.

Login Formular

Der Anmeldevorgang sieht ungefähr so aus: Ich gebe meine E-Mail-Adresse ein, gebe mein Passwort ein und drücke die Eingabetaste. In diesem Beispiel erfahren Sie, wie Sie jedes dieser Felder erst nach Abschluss des vorherigen Felds mit nur HTML und CSS anzeigen. Wir werden dies und dann eine modifizierte Version erstellen.

Beginnen wir mit einem ersten Schuss auf das Markup.

Wenn das ein wenig entmutigend aussieht, mach dir keine Sorgen, ich werde jedes Stück erklären. Beginnen wir mit der E-Mail-Eingabe. Wir sehen einige Attribute, die dem Tag über den Namen hinaus hinzugefügt werden. Zunächst wird der Eingabetyp auf "E-Mail" gesetzt. Dies ist eine relativ neue Art der Eingabe, die uns ein besonderes Verhalten bei der Unterstützung von Browsern verleiht. Auf dem iPhone wird beispielsweise das Symbol "@" auf der Haupttastatur angezeigt.

Ein weiteres Merkmal von Eingabetypen ist, dass HTML5-Formulare über Validierungsfunktionen auf Browserebene verfügen. Dies bedeutet, dass Sie kein JavaScript schreiben müssen, um die Validierung grundlegender Formularelemente durchzuführen! Beachten Sie, dass wir sowohl für die E-Mail- als auch für die Kennwortelemente ein "erforderliches" Attribut haben. Sobald diese beiden Elemente ausgefüllt sind und ihre Werte vom Browser als gültig angesehen werden, können Sie sie sogar mit dem :valid-Pseudo-Selektor ausrichten.

Regex Land

Das ist großartig, aber wir könnten es besser machen. Beispielsweise akzeptiert der Browser "a@b" als akzeptable E-Mail. Der Grund dafür ist, dass eine E-Mail-Adresse eingerichtet werden könnte, um zu etwas wie "etwas@localhost" zu gelangen. Unser Passwort kann alles sein, was wir eingeben, daher wird ein Passwort mit einem einzelnen Zeichen wie "a" als gültig angesehen. Fügen wir einige reguläre Ausdrücke hinzu, um diese Probleme zu beheben.

Hinweis: Wenn Sie mit Regex nicht vertraut sind, ist das in Ordnung. Wir behandeln hier einen kleinen Teil, um zu zeigen, wie Sie es für allgemeine Aufgaben bei der Validierung von HTML5-Formularen verwenden können. Sie können sich jedoch an die Browser-Implementierungen halten und trotzdem dem Lernprogramm folgen. Überspringen Sie einfach diesen Abschnitt und fahren Sie fort!

Noch ein Hinweis: Sie können sich auch die regulären Ausdrücke für Dummies: Screencast-Serien von Jeffrey Way ansehen.

Lassen Sie uns jeden Teil dieser Muster durchgehen. Reguläre Ausdrücke beschreiben und vergleichen das Format einer Zeichenfolge.

Wir beginnen mit dem E-Mail-Muster.

  • [^ @]* - Entspricht einer beliebigen Anzahl von Zeichen, die kein @-Zeichen oder Leerzeichen sind.
  • @ - ein wörtliches @ Zeichen
  • \. - ein wörtliches.
  • [a-zA-Z] - ein beliebiger Buchstabe, sowohl in Groß- als auch in Kleinbuchstaben
  • [a-zA-Z]{2,} - eine beliebige Kombination aus zwei oder mehr Buchstaben

Wenn wir all dies zusammenfassen, können wir sehen, dass dieser Ausdruck besagt, dass eine E-Mail ein beliebiger Satz von Zeichen außer einem @-Zeichen ist, gefolgt von einem @-Zeichen, gefolgt von einem beliebigen Satz von Zeichen außer einem @-Zeichen, gefolgt von einem Punkt, gefolgt von mindestens zwei Buchstaben.

Wir können einen viel einfacheren regulären Ausdruck anwenden, wenn wir nur anhand der Länge des Werts validieren möchten:

Das . bedeutet "irgendein Zeichen" und die {5,} sagt, dass es mindestens 5 von ihnen geben muss.

Wenn diese Muster vorhanden sind, wird das Element erst dann als gültig angesehen, wenn ein Wert eingegeben wurde, der das Muster erfüllt.

Wir werden das Markup mit etwas mehr Politur und ein paar weiteren Nicht-Form-Elementen abrunden.

Einige :valid CSS Magie

Nachdem wir nun ein Markup für unser Anmeldeformular haben, wollen wir sehen, was wir mit CSS tun können, um auf die Eingaben des Benutzers zu reagieren.

Wir möchten das nächste Formularelement anzeigen, wenn das aktuelle gültig ist. Beginnen wir damit, die Formularelemente selbst auf zugängliche Weise auszublenden, damit die Bildschirmleser weiterhin das vollständige Formular sehen und die Werte durch die automatische Vervollständigung ausgefüllt werden können. (Chris Coyier spricht darüber, warum man kein Display verwenden display:none über solche Dinge hier.) Wir verwenden die visuallyhidden Methode, die in Chris Beitrag beschrieben ist.

Wir beginnen mit einigen grundlegenden Stilen.

conversational-form-base-allconversational-form-base-allconversational-form-base-all

Dies gibt uns ein einfaches zentriertes Anmeldeformular. Nehmen wir das visuell verborgene Konzept und wenden es auf die Elemente an, die wir verbergen möchten.

conversational-form-baseconversational-form-baseconversational-form-base

Wir werden einige Animationen ausführen, daher haben wir die Klasse ein wenig um die Deckkraft erweitert, die absolute Positionierung entfernt und die Übergangsdefinition hinzugefügt.

Hinweis: Wir enthalten keine Herstellerpräfixe für den Übergang, aber Sie sollten!

Zeigen wir ihnen nun, wann sie angezeigt werden sollen, indem wir den :valid Pseudo-Selektor und den + Geschwister-Selektor verwenden.

conversational-form-animation-allconversational-form-animation-allconversational-form-animation-all

Ein Hinweis zu den besten Übungen

Es ist wichtig, die Ziele und Erwartungen des Benutzers in einem Webformular zu berücksichtigen. Manchmal ist es eine ausreichende Lösung, die Eingaben vollständig vor dem Benutzer zu verbergen. In einigen Fällen kann sich dies jedoch nachteilig auswirken und dazu führen, dass der Benutzer das Gefühl hat, dass es sich nicht um eine klare Roadmap für das Ausfüllen des Formulars handelt und dass dies möglicherweise länger dauert, als er bereit ist, aufzugeben .

Eine Lösung für dieses Problem wäre die Verwendung einer Art Verschleierung, ohne die Eingaben vollständig zu verbergen, die dazu beitragen, den narrativen Feedback-Ansatz für Formen zu erstellen, die ein klares Ziel und relativ vorhersehbare Erwartungen haben. Hier ist eine modifizierte Version, die Skalierung, Unschärfefilter des Webkits, Deckkraft und pointer-events: none, um dem Benutzer die Eingaben zu "präsentieren", sobald sie verfügbar sind. Wir müssen auch sicherstellen, dass die Zeigerereignisse wiederhergestellt werden, wenn die Eingaben verfügbar sind, damit der Benutzer darauf klicken kann.

conversational-form-animation-modifiedconversational-form-animation-modifiedconversational-form-animation-modified
Schauen Sie sich die Demo an

Ein kurzer Fehler: Wenn ein Benutzer die Tabulatortaste drückt, gibt er das nächste Formularelement ein. Wir verhindern, dass mit Zeigerereignissen auf das nächste Formularelement pointer-events: none, aber in CSS gibt es kein "fokussierbares" Attribut. Stattdessen müssten wir dieses Verhalten mit einem Hauch von JavaScript (mit jQuery-Geschmack) steuern.

Dieses JavaScript überwacht unsere Formulareingaben und deaktiviert/aktiviert Eingaben basierend auf dem Status ":valid" der vorherigen Geschwister. Dies verhindert, dass wir das Element fokussieren. Die pointer-events: none funktioniert noch, um zu verhindern, dass unsere Übermittlungseingabe den Schwebezustand empfängt.

Andere Anwendungsfälle

Stellen Sie sich ein Formular mit mehreren "Tracks" vor, wie in unserem Beispiel "Anmelden oder Anmelden". Ein Benutzer kann mehrere Optionen auswählen, die eine neue Auswahl von Formularelementen erfordern würden, z. B. die Auswahl eines Status für den Versand oder eines Zeitraums für eine Reservierung eines Abendessens. In diesen Fällen reicht eine einfache Validierung möglicherweise nicht aus. Stattdessen verwenden wir eine JavaScript-basierte Lösung.

Nehmen wir zum Beispiel das Beispiel "Anmelden" und "Anmelden". Um dies zu lösen, müssen wir den Server fragen, ob es einen Benutzer gibt, der der angegebenen E-Mail-Anmeldung entspricht.

Im obigen JavaScript senden wir die E-Mail-Adresse unter der URL "/check_for_user" an den Server. Der Server würde eine einfache JSON-Antwort zurückgeben, ähnlich der folgenden.

Basierend auf diesem Wert fügen wir der Eingabe eine Klasse hinzu und ändern den Endpunkt für das Formular. Wir legen auch die relevanten Passwörter fest, die erforderlich sind. Wir könnten dann CSS auf verschiedene Arten verwenden, um zu definieren, was als nächstes passiert. Zum Beispiel könnten wir einen ähnlichen Ansatz von früher verwenden, um Eingaben ein- oder auszublenden.

Wenn Sie sich für ein neues Konto anmelden, muss möglicherweise das Feld für das Anmeldekennwort (und nicht das Feld für das Anmeldekennwort) angezeigt werden. Dazu würden wir den ~ Selektor verwenden, der der allgemeine Selektor für Geschwister ist und es uns ermöglicht, über die irrelevanten Geschwisterelemente zu "springen".

Fallbacks

Wenn wir neue Techniken in der Front-End-Entwicklung vorantreiben, funktionieren sie nicht immer in allen Browsern. Glücklicherweise ist es in dieser Situation sehr einfach, mit einem guten Fallback umzugehen. Wir werden in den meisten gängigen Browsern behandelt, aber diese Auswahl enthält leider nicht iOS 7 oder Android. Bei nicht unterstützten Browsern greifen wir einfach auf das Standardverhalten des Formulars zurück.

Zu diesem Zweck können wir mit Modernizr feststellen, ob der Browser die Validierung von Formularelementen unterstützt. Es wird empfohlen, Modernizr für diese Art der Feature-Erkennung zu verwenden. Wir können jedoch vorerst auch eine Schnellfunktion schreiben. Die "Non-Core Detects" von Modernizr enthalten eine Option für die "Formularvalidierung", sodass Sie einen benutzerdefinierten Download erstellen müssen. Sobald Sie dies eingerichtet haben, erhalten unterstützende Browser die Klasse der form validation für das html-Element. Sie können auf diese formvalidation abzielen, um das Formular für die Unterstützung von Browsern zu verbessern.

Da die Pseudoelemente :valid und :invalid nur in unterstützenden Browsern funktionieren, ist das CSS, das die Eingaben verbirgt, das einzige CSS, mit dem wir die progressive Verbesserung verwenden müssen. Die Eingaben funktionieren in nicht unterstützten Browsern mit ihrer Standardfunktion.

Das ist alles!

Sie haben jetzt einige coole Möglichkeiten, Ihre Formulare auf eine neue Ebene der interaktiven Konversationsmodellierung mit Ihren Benutzern zu bringen. Welche anderen mächtigen Dinge haben Sie sich vorgestellt, indem Sie die :valid und :invalid Pseudoklassen verwendet haben? Sprechen Sie darüber in den Kommentaren!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.