HTML FORM best practice

Bei der Entwicklung von Formularfeldern auf Webseiten sollte man die Usability nicht ausser Acht lassen. Zur einfachen Orientierung überlasse ich hier meine Checkliste:

 

• Geringe Felderzahl - kurz und bündig!

• Titel bzw Name des Formulars angeben

• Pflichtfelder gut markieren

• Falls passend, Relevanz (zuerst Bedarf klären, dann Angaben abfragen)

• Labels links oder oberhalb, idealerweise oberhalb links

• Falls passend, lange Formulare visuell unterteilen/gruppieren

• Aktives Feld markieren (Rahmen)

• Scrollen wenn möglich vermeiden

• Feedback durch inline Validierung (positiv und negativ -> grün/rot)

• Ausreichende Feldgrösse mit genug CSS Padding und grosser Schrift

• Formularfelder grundsätzlich linksbündig (wegen mobiler Geräte)

• Optional und falls passend: Erklärung, war das Feld notwendig ist (Warum fragen wir das?), ggf. auch mit (i) und einem :hover Tooltip lösbar

• Neue Input type verwenden (email, tel, number) damit auf mobilen Geräten die richtige Tastatur angezeigt wird. Schön: Alte Browser haben als Fallback ohnehin type=text

• Passwortfeld offen/verdeckt wählbar

• Captcha nur wenn nicht anders möglich