Benutzerfreundliche Formulare

[Matthias Scharwies]

Hallo zusammen,

@JürgenB und ich hatten uns diesen Thread zum Anlass genommen, ein Tutorial zu benutzerfreundlichen, mehrteiligen Formularen zu erstellen.^[1]

Vorher: Aus den 3 Portalseiten HTML/Tutorials/Formulare, HTML/Tutorials/Formulare/input und JavaScript/Tutorials/Formulare wurde die Portalseite

Formulare (mit Cards).^[2]

1. Was ist ein Webformular? klärt die Funktionsweise von Formularen.

2. Benutzereingaben zugänglich gestalten
   musste gründlich umgearbeitet werden. Das erste Beispiel bestand (aus noch nicht erklärten) Radio-Buttons; gleich nach label kamen Beispiel mit dem heute verpönten placeholder. Ich habe das Kapitel browsereigene Validierung dort integriert und duplicate content entfernt.

Jetzt sind wir bei den Multistep-Formularen. Problem, das Jürgen bereits angemerkt hatte: Komplexere Formulare werden serverseitig ausgewertet und deshalb eben dort oft auch zusammengestellt.

Und trotzdem könnten wir dort einfach zeigen, welche Techniken man verwendet und welche Probleme man in der Konzeption berücksichtigen, bzw. vermeiden müsste. Das CSS und JS soll nur gezeigt, aber nicht ausführlich erklärt werden.

Die vorhandenen Formulare:

Klassen mit JavaScript umschalten und mit CSS nutzen Bestellformular_mit_verschiedenen_Abschnitten

sind imho zu kompliziert und auch nicht (mehr) schön anzusehen. Mein Beispiel aus dem Forum ist von der Geschäftslogik zu kompliziert, was ja auch den Thread-Ersteller bei der Planung seines Spiele-Wochenendes irritiert hatte.

Ich habe hier einen neuen Versuch: Beispiel:Formular-18.html

Dieses baut auf den Beispielen 16 und 17 auf.

Ziel soll sein, die einzelnen fieldsets erst einzublenden/freizuschalten, wenn das aktuelle ausgefüllt ist. Dazu habe ich ein paar Fragen:

1. Habt ihr generelle Kritikpunkte/Anregungen?

2. Funktion

   • a. Immer nur 1 fieldset sichtbar machen
     oder
   • b. die anderen mit disabled ausgrauen und dann eben "hell machen" - der Fokus kann ja immer ins erste Eingabe-Feld springen, damit das aktuelle fieldset immer im Viewport ist.
   • c. Wann soll disabled entfernt werden? Ja, wenn alle Eingabefelder gefüllt sind - was macht man aber mit den Checkboxen des ersten fieldsets und der textarea???
   • d. Bei der Sterne-Bewertung (ist in einem div) - Ein label oder p als Erläuterung?
   • e. Bei der Sterne-Bewertung ist :hover trotz disabled aktiv - schlimm oder sollte man das CSS dynamisch einfügen?

Ich würde das gerne auf dem Stammtisch am Mittwoch, den 04.09.2024 auf Discord besprechen! (Und anschließend das Tutorial fertigstellen!)

Herzliche Grüße

Matthias Scharwies

---

1. Angefangen hatten wir zusammen mit @Der Martin auf der MV in Hannover, dann kam halt immer wieder irgendetwas dazwischen. ↩︎

2. In Formulare/Eingabe_von_Text habe ich eine Seite zu Attributen wie autocomplete und spellcheck gefunden - das muss auch noch umgearbeitet werden.
   Den Artikel zu disabled und readonly habe ich einfach in die Referenz gepackt: HTML/Attribute/disabled#Ausgrauen:_disabled_vs_readonly
   Genauso mit inputmode ↩︎