Muster formular

Schauen Sie sich auch diese große Liste von HTML-Formular-Regex-Muster an. So verbessern Sie sich. Aber was besser ist, ist, dass überhaupt keine Verbesserung erforderlich ist. HTML mit ein wenig CSS kann Benutzern eine ausgezeichnete Erfahrung bieten. Es ist der Inhalt, der zählt, und Sie brauchen JavaScript dafür nicht. Je mehr Sie sich auf Inhalt (HTML) und Stil (CSS) verlassen können, desto besser. Ich kann das nicht genug betonen: So oft ist die Grunderfahrung die beste und leistungsstärkste. Es macht keinen Sinn, etwas zu verbessern, wenn es keinen Mehrwert schafft (siehe inklusives Designprinzip 7). Die HTML5-Formularvalidierung ist gemäß der HTML5-Spezifikation zu einem neuen Standard geworden, doch wie das Fehler-Popup angezeigt wird, liegt vollständig beim Browseranbieter. Erwarten Sie unterschiedliche Ästhetiken in verschiedenen Browsern, was nicht die Konsistenz Ihrer Benutzeroberfläche hilft.

Wenn es um die Formularvalidierung geht, gibt es eine Reihe wichtiger Details zu berücksichtigen. Von der Wahl, wann Feedback gegeben werden soll, über die Anzeige dieses Feedbacks bis hin zur Formulierung einer guten Fehlermeldung – all diese Dinge müssen berücksichtigt werden. Muss das Registrierungsformular Vorname, Nachname, E-Mail-Adresse und Passwort erfassen? Gibt es bessere oder alternative Möglichkeiten, um nach diesen Informationen zu fragen, die die Erfahrung vereinfachen? Aber das kann alle möglichen Probleme verursachen. Die Leute mögen es, Datumsangaben anders zu formatieren (MM/DD/YY, DD MONTHNAME YYYY, etc.), und sie werden wahrscheinlich ihre Anweisungen zur richtigen Formatierung nicht lesen, wenn sie es die ersten Paar mal versuchen. Auch gibt es nichts zu stoppen ungültige Daten wie 31. Februar, oder Termine zu weit in der Zukunft wie 2099-12-31. Darüber hinaus müssen Sie die Zeichenfolge in ein verwendbares Datumsobjekt analysieren, sobald Sie sie auf dem Server erhalten haben. Anstelle all dessen verwenden Sie einfach die Datumseingabe. Oder Datetime. Das pattern-Attribut ist ein Attribut der Eingabetypen Text, Tel, E-Mail, URL, Kennwort und Suche.

Räumlich sollte die Beschriftung ihrem Formularsteuerelement am nächsten sein, nicht dem Steuerelement des vorherigen Felds. Dinge, die nahe beieinander erscheinen, deuten darauf hin, dass sie zusammengehören. Gleiche Abstände könnten die Ästhetik verbessern, aber das wäre auf Kosten der Benutzerfreundlichkeit. Wenn Sie ein Muster einschließen, geben Sie eine Beschreibung des Musters im sichtbaren Text in der Nähe des Steuerelements an. Fügen Sie außerdem ein Title-Attribut ein, das eine Beschreibung des Musters enthält. Benutzer-Agents können den Titelinhalt während der Einschränkungsüberprüfung verwenden, um dem Benutzer mitzuteilen, dass das Muster nicht übereinstimmt. Einige Browser zeigen eine QuickInfo mit Titelinhalten an, die die Benutzerfreundlichkeit für gesichtete Benutzer verbessert. Darüber hinaus kann die hilfsfähige Technologie den Titel laut vorlesen, wenn das Steuerelement in den Fokus gerückt wird, aber dies sollte nicht für die Barrierefreiheit herangezogen werden. Skurrile und minimalistische Schnittstellen lassen Benutzer sich nicht großartig fühlen – offensichtliche, inklusive und robuste Schnittstellen tun dies. Eine künstliche Reduzierung der Höhe von Formen wie dieser ist sowohl unzwingend als auch problematisch.

E-Mail-Adressen und Datumsangaben sind so häufig, dass bereits bestimmte Formulareingabetypen für sie vorhanden sind, sodass kein Muster verwendet werden muss. Jedes Mal, wenn Sie ein bestimmtes HTML-Feature verwenden können, sollten Sie es verwenden, anstatt auf das Erstellen regulärer Ausdrücke zurückzugreifen. Überraschenderweise, auch wenn der Benutzer JavaScript im Browser deaktiviert hat, zeigen die neuesten Browser immer noch die Popup-Validierung an und verhindern die Formularübermittlung. Tatsächlich ist die Unterstützung in allen gängigen Browsern heutzutage sehr solide: Beachten Sie, dass wir das Einreichen-Ereignis des Formulars hören, nicht das Klickereignis der Schaltfläche. Letzteres verhindert, dass Benutzer das Formular absenden können, indem sie die Eingabetaste drücken, wenn sich der Fokus in einem der Felder befindet. Dies wird auch als implizite Formularübermittlung bezeichnet. Ersetzen wir nun die Standardeinstellung “Bitte passen Sie das gewünschte Format ab” durch eine vollständig angepasste Nachricht. Dazu verwenden wir ein wenig JavaScript. Personen, die einen nicht unterstützenden Browser verwenden, sehen eine Standardtexteingabe (-Eingabetyp=”Text”>). Dies ist eine Form der progressiven Verbesserung, die ein Eckpfeiler für die Gestaltung inklusiver Erfahrungen ist. Hinweis: Vergessen Sie nicht, Envato Elements auszuchecken, wenn Sie nach inspirierendem Formular-UI-Design suchen.

Wir setzen Google Analytics in Verbindung mit der Funktion IP-Anonymisierung ein.