Haupt-Reiter

Online-Formular

Ein Online-Formular kann auf zwei Arten verschickt werden:

Einmal mit der „GET“ Methode dort werden die Daten in Form von Parametern an die URL angehängt und mit dieser sichtbar verschickt. Auf dem Server bzw. auch später im Browser kann auf diese Parameter zurückgegriffen werden. Nachteil: Die Daten sind im Browser sichtbar und es kann keinerlei Sicherheit gewährt werden, zudem können auch maximal nur 1000 Zeichen verschickt werde.

 

Zweite Methode wäre die „POST“ -Variante, dort werden die Daten mit Hilfe des http-Protokolls im Header der Daten übertragen. Dadurch sind diese für den User unsichtbar. Daten, die mit dem Post verschickt werden, können auch verschlüsselt werden. Neben Textdaten können auch binäre Informationen (z.B. Bilder) verschickt werden. Die Datenmenge ist nicht begrenzt.

 

Aufgaben eines Formulars

Mit Hilfe von Formularen können Informationen des Benutzers zum Webserver
übertragen und dort ausgewertet werden. Dieses zentrale Element interaktiver Webseiten ermöglicht beispielsweise:
Suchmaschinen
• Übertragen von Benutzerdaten z. B. Anschrift, Bankverbindung,
• Auswählen und Bestellen von Waren im Webshop,
• Kommunizieren über Gästebücher, Foren, Chats.

Während die Elemente eines Formulars in HTML geschrieben werden, ist
zur Verarbeitung der eingegebenen Formulardaten eine Skriptsprache wie JavaScript bzw. PHP erforderlich.

Für ein Online-Formular gibt es unterschiedliche Formular-Felder / Boxen:

Versteckte Felder sind für den Nutzer unsichtbar und dienen der Übertragung
von Informationen, ohne dass der Benutzer etwas eingeben muss.
Dies könnte beispielsweise die Bestellnummer oder der Preis eines bestellten
Artikels sein.

 

Gestaltung von Formularen

Pflichtfelder

Durchgesetzt hat sich die Methode, Pflichtfelder mit einem Stern (*) zu markieren.

Der Hinweis, dass es sich hierbei um ein Pflichtfeld handelt (Legende), sollte über den Textfeldern stehen. Sollte also vor der Eingabe seiner Daten zu lesen sein, da es sich bei dem Stern auch um optionale Eingabefelder handeln könnte.

Weniger ist mehr. Mit Pflichtfeldern ist natürlich gewissenhaft umzugehen. Datenpreisgabe ist für die Meisten nachwievor ein sensibles Thema.

Fehlermeldung

Das wichtigste: Gut sichbar unterbringen!

Der User muss sofort sehen, dass etwas nicht geklappt hat. Eine verständlicher Einzeiler sollte den User auf das Problem hinweisen.

Optimalerweise wird das fehlerhafte Eingabefeld markiert um den User schnell zum korrekten Abschicken des Formulares zu führen.

 

Bewertung: 
3
Durchschnitt: 3 (3 Stimmen)

Kommentare

Bild von ELNO

Neben dem technischem Anteil würde ich mir auch gestalterische Inhalte anschauen, da wir uns ja inhaltlich in der KOGE befinden. Also wie ist ein Dokument aufgebaut, welche gestalterischen und zielorientierten Aspekte sind bei der Erstellung zu beachten. 

AP 2022 Content:  https://mmm.page/elno.workshops
Workshop via Discord: https://discord.gg/yq8kDg6WWw
Mediencommunity: https://mediencommunity.de/users/elno

 

Hier gibt es eine ziemlich nice Übersicht für Komponenten im Web (vielleicht auch relevant für U5 Websitelayout. 

Wichte Komponenten für Onlineformulare sind z.B.:
- checkbox
- combobox / autocomplete
- date input
- dropdown (menu)
- radio button
- stepper
- toggle
- text input / text area
 

Was auch noch relevant sein könnte ist wie man Online-Formulare möglichst benutzerfreundlich und barrierefrei gestalten sollte. 

Allgemein wichtig:
- Pflichtfelder kennzeichnen
- Kontrollmöglichkeit von EIngabe, Fehleranzeige
- Labels zwingend erforderlich, können nicht durch Platzhaltertext im Inputfeld ersetzt werden

Benutzerfreundlichkeit durch übersichtliche Gestaltung und einfache Navigation:

- möglichst geringer Aufwand für den User
- nur wichtigste Information abfragen
- so wenige Felder wie möglich
- geeignete Eingabefelder verwenden (z.B. kein Textfeld für Geburtsdatum)
- zusammengehörige Eingabefelder in Themenblöcke einteilen/gruppieren
- Fortschritt anzeigen und Navigationselemente (vor, zurück)

Accessability:
- auf klare Farbgebung achten
- Navigation und EIngabe ohne Maus und nur durch Tastatur muss möglich sein
- durch richtige fieldset tags und legend elements für screenreader optimieren
- autocomplete Funktion kann sehr hilfreich sein an geeigneten Stellen (z.B. Straßennamen)