HTML/CSS: Formulargestaltung

[1UnitedPower]

Hakuna matata!

Wie sind eure Erfahrungen? Was ist best practise draußen im harten Leben des Webentwicklers?

Das ist eine spannende Frage. Ich werf einfach mal ein paar lose Gedanken in die Runde:

1. Wo Benutzereingaben fällig werden, da werden Fehler gemacht und da sollte es entsprechende Fehlermeldungen geben. Die Meldung sollte direkt am Formularfeld platziert werden und nicht freistehend am Anfang oder Ende. Auch das sollte man von Beginn an beim Entwurf des Formulars berücksichtigen. Dabei sollte man auch gleich an den Fall denken, dass ein Eingabefeld unterschiedliche Fehler prodzieren könnte, die entweder simultan oder isoliert auftreten können.

2. Formulare Ausfüllen ist eine zeitraubende, nervige Tätigkeit, wir sollten es unseren Nutzern so leicht wie möglich machen. Es gibt Eingabefelder, die tauchen in jedem zweiten Formular wieder auf, zum Beispiel für Vor- und Nachnamen. Für diese Fälle gibt es das autofill-Attribut. Es gibt beim W3C eine schöne Liste über häufig gebrauchte Formularfelder.

3. <label for="name">Name</label><input id="name"> oder <label>Name<input></label>? Das ist mehr als nur Geschmackssache. Die erste Variante hat den Vorteil, dass man <label> und <input> auch getrennt platzieren kann, zum Beispiel in verschiedenen Tabellenzellen oder jeweils in einem <dt>- resp. <dd>-Element. Die Variante wird aber äußerst ungebräuchlich, wenn dynamisch neue Formularfelder hinzukommen können. Wir stellen uns einen Internetshop vor und der Nutzer soll in der Lage sein beliebig viele Adressen zu hinterlegen. Dafür gibt es einen Button im Formular, der bei Betätigung die entsprechenden Felder für Straße, Postleitzahl etc. ergänzt. Die Funktion, die das realsiert, wird recht komplex, weil sie für jedes Feld eine eindeutige ID erzeugen muss. Hier bietet es sich an, das <input>-Element im <label>-Element zu verschachteln, auf diese Weise ist die Zugehörigkeit impliziert modelliert und die Funktion für das Erzeugen der Formularfelder kann entsprechend simpel gehalten werden.

4. Formularfelder erfordern manchmal weiterführende Erklärungen, zum Beispiel sollte eine Checkbox für "AGB akzeptieren" auch auf die AGB verlinken. Die Checkbox befindet sich typischerweie am Ende eines Formulars, da wäre es sehr ärgerlich für den Benutzer, wenn durch einen Klick auf den Link, alle Eingaben verloren gingen, die er bis dahin gemacht hat. Solche Links sollte deshalb mit target="_blank" ausgezeichnet werden.