|
||||
![]()
In diesem Thread soll es um die Usability von Formularfeldern gehen, mit dem Fokus auf Validität, Erforderlichkeit und Meldungstexten.
Die Merkmale von Formularfelder sind komplex. 1. Hat es den Fokus? 2. Ist es erforderlich? 3. Ist es valide? (Diese ersten drei Merkmale können in Kombination auftreten.) 4. Hovertext? 5. Unter dem Formular angezeigter Meldungstext? 6. Placeholder? 7. Sollen Standards des Browsers überschrieben werden oder nicht? Hat jemand von Euch dieses Thema schonmal für eine andere Site durchgearbeitet und kann eine Empfehlung aussprechen oder eine vorbildliche Beispielseite nennen? Testcase: https://borumat.de/-/fahrradzukunft/...required-focus 1. Fokus FF+GC: Jedes Feld im Fokus erhält einen blauen Rahmen, das finde ich gut, es erleichtert die Orientierung. 2. Pattern FF+GC: Ohne Pattern findet offenbar keine (vernünftige) Validierung im Feld Mail statt. "foo@bar" geht als valide durch. 3. Erforderlichkeit FF+GC: Sie wird ausschließlich durch einen Hovertext signalisiert. Das finde ich zu wenig. Etabliert ist das *. Ich habe das per generated content einfügen lassen. 4. Invalidität FF: Kennzeichnung mit rotem Rahmen und Hovertext "Bitte halten Sie das angegebene Format ein" GC: Kennzeichnung mit roter Wellenlinie als Unterstrich und Hovertext "Ihre Eingabe muss mit dem geforderten Format übereinstimmen" Ich halte es für sinnvoll, den Hinweistext nicht als Hovertext sondern als normalen dauerhaft sichtbaren Text direkt unter dem Formularfeld auszugeben. Und dazu auch den Text verständlich zu formulieren wie z.B.: ""Bitte korrigieren Sie die Telefonnummer. Am Anfang kann ein "+" stehen. Ansonsten sind Ziffern, Leerzeichen oder "-" möglich." Ich habe per generated content eine Meldung einfügen lassen. Leider werden auch leere Felder als "invalid" betrachtet. Das muss ich also noch lösen. Wie man die Hovernachrichten deaktiviert - sie sind ja überflüssig, wenn es ausgegeben Text gibt - weiß ich noch nicht. 5. Leere Felder FF+GC: Leere Felder werden nicht als invalide gekennzeichnet. Gut so. FF: Sobald man jedoch einmal etwas in ein Feld eingegeben hat, was invalide ist, bleibt die Kennzeichnung als invalide auch dann erhalten, wenn man den Inhalt ganz wieder löscht. Das ist inkonsistent. GC: Dort verschwindet die Kennzeichnung
__________________
|
Sponsored Links |
|
|||
![]()
Es ist durchaus ausreichend, die standardvalidierungen zu verwenden. Bzw anders ausgedrückt: Verwendet man lediglich die Standardformatierungen und Standardfehlermeldungen dann ist ein Formular Usable genug laut Accessibility Guidelines
Zusätzlich dazu: Diese generierten "bubbles" genügen in den seltensten Fällen nicht den Anforderungen ans design und auch das Verhalten ist oft nicht das wirklich gewünschte, da es zB verschwindet, wenn man raustabbt... Da gibt es leider keine Möglichkeiten, diese Nachrichten zu beeinflussen. Deshalb werden die auch auf keiner größeren Seite wirklich verwendet. Persönlich finde ich es schade, dass es hier keine Gestaltungsmöglichkeiten gibt, aber ist leider so. Man bekommt diese Hinweise weg, indem man <form novalidate> verwendet. Deshalb wird Formularvalidierung heutzutage eigentlich immer mit JS umgesetzt. Mittels parsleyjs (Parsley - The ultimate JavaScript form validation library) kannst du jeden Art von Validierung haben, die du möchtest. Die Validierung einer Mail brauchst du nicht mit einer pattern anpassen, foo@bar ist durchaus eine gültige Mailadresse. Siehe auch: https://stackoverflow.com/questions/...-without-a-dot Der einzige Weg eine Mailadresse zu validieren ist, eine Mail an die Adresse zu schicken und auf eine Bestätigung des Users zu warten. Bezüglich generated Content: Der wird in IE11 zb nicht vorgelesen. https://tink.uk/accessibility-suppor...rated-content/ Zusammenfassend: Entweder man nimmt die im Browser vorhandene Validierung, dann muss man aber auch mit dem Verhalten zufrieden sein, ändern kann man das nicht. Oder man verwendet JS zur Formvalidierung, das funktioniert gut und man kann auch jeglichen Spezialfall damit abdecken den man braucht. Natürlich ist es auch möglich beide Varianten auf einmal zu nutzen (progressive enhancement) |
Sponsored Links |
|
|||
![]()
Ja, damit meine ich diese vom Browser generierten Hilfe-Bubbles. Die schauen überall anders aus und verhalten sich leider auch etwas anders.
Für parsleyjs muss man nicht viel programmieren können, da wird das meiste über data- attribute gesteuert. Du deklarierst zB ein Formular, welches validiert werden soll so: Code:
<form id="demo-form" data-parsley-validate=""> Dann kannst du so zB die standardvalidierung erweitern, dass mindestens zwei ausgewählt werden sollen: Code:
<input type="checkbox" name="hobbies[]" id="hobby1" value="ski" data-parsley-mincheck="2"> <!-- data-parsley-mincheck --> Code-Beispiele von diesem einfachen Formular: Parsley - Examples | Simple form demo Parsley - The ultimate documentation Liste der vorhandenen Validatoren, |
|
||||
![]()
Vielen Dank! Wenn die Verwendung von parsleyjs weniger kompliziert ist als ich dachte, werde ich mir das mal ansehen.
Zur Entweder-Oder-Logik bei einem Kontaktformular, werde ich mal in einem PHP-Forum anfragen, da es ja unwahrscheinlich ist, dass hier noch jemand antwortet. Schönen Tag!
__________________
|
![]() |
Themen-Optionen | |
Ansicht | |
|
|