Webformular

Ein Webformular ist ein Formular auf einer Webseite zur Erfassung von Daten, die zur Verarbeitung an einen Webserver gesendet werden. Man findet sie beispielsweise in Webmail-Anwendungen, Suchmaschineneingabefeldern, in Sozialen Netzwerken oder auf Login-Seiten. Das Absenden der Daten verläuft über das Hypertext Transfer Protocol via HTTP-GET, HTTP-POST oder dem XMLHttpRequest (Ajax).

Begriff

ISO 9241 definiert ein Formular als „strukturierte Darstellung von Feldern und weiteren Elementen einer Benutzungsschnittstelle, die der Benutzer liest, die er ausfüllt, für welche er Einträge auswählt oder die er verändert“. Der Begriff ist dabei nicht nur auf Formulare auf Webseiten beschränkt, sondern umfasst unabhängig von Betriebssystem, Anwendung oder Endgerät sämtliche Formulare, mit denen der Benutzer interagieren kann, oftmals im Verlauf eines Dialogs^[1].

Mögliche Auswahlfelder

Folgende Eingabefelder sind im HTML-4-Standard vorgesehen:

• einzeiliges Texteingabefeld (für Freitext)
• Passwortfeld (Eingaben werden maskiert auf dem Bildschirm ausgegeben)
• mehrzeiliges Texteingabefeld (Textarea)
• Auswahllisten (Dropdown-Liste)
• Radiobuttons (Auswahl einer Option aus mehreren)
• Checkboxen (Auswahl mehrerer Optionen)
• Felder zum Datei-Upload
• versteckte Formularfelder (z. B. für Session-IDs)
• Klick-Buttons, dazu gehört auch der Bestätigungsknopf (submit) oder ein Knopf zum Zurücksetzen der Eingaben

HTML5 erlaubt weitere Arten von Eingabefeldern, die sich oft zum einzeiligen Eingabefeld nur durch ihre Semantik unterscheiden:

• Telefonnummern
• E-Mail-Adressen
• Bereichsauswahl (englisch: range slider)
• Datumsauswahl
• Comboboxen

Erweiterte Widgets

Durch Einsatz clientseitiger Techniken, wie beispielsweise JavaScript, bieten viele Webframeworks erweiterte Eingabemöglichkeiten an. Dazu zählen unter anderem Widgets wie Slider, Kalenderboxen, Comboboxen, Farbwähler oder Drag-and-Drop-Felder.

Einige typische Webframeworks zu diesem Zweck sind:

• Dojo Toolkit – JavaScript-Framework zur Entwicklung von JavaScript-/Ajax-basierten Anwendungen
• jQuery UI – JavaScript-Framework zur Funktionserweiterung der Benutzerschnittstelle auf Basis von jQuery
• Apache Wicket – Web-Framework als Basis für die Entwicklung von Webapplikationen auf einem Java-Applikationsserver
• JavaServer Faces – Web-Framework als Basis für die Entwicklung von Webapplikationen auf einem Java-Applikationsserver
• Ext JS – JavaScript- bzw. Ajax-Framework für interaktive Webanwendungen

Verwendung

Neben Suchmaschinen und Webmailern gibt es noch Onlineshops, die Formulare für die Korrektur der Adress- und Kontodaten anbieten. Auch werden Webformulare für Bestellung von Newslettern für die Personalisierung oder das Hochladen von Dateien eingesetzt. Formulare werden eingesetzt, um Kommunikation ohne eine Angabe einer E-Mail-Adresse durchzuführen. Dabei kann Spam zum Beispiel durch Captchas größtenteils ausgeschlossen werden. Prinzipiell ist jede Seite, die ein Radio-, Checkbox- oder Button-Element anzeigt, ein Webformular.

Beispiel

Beispielausgabe eines einfachen Webformulars.

Der folgende HTML-Quelltext bindet eine Wikipedia-Suche in die entsprechende Stelle der Webseite ein.

<form action="http://de.wikipedia.org/wiki/Spezial:Suche">
  <fieldset>
    <legend>Suchen</legend>
    <input type="text"   name="search" value="" />
    <input type="submit" name="go" value="Artikel"/>
    <input type="submit" name="fulltext" value="Volltext" />
  </fieldset>
</form>

Weblinks

• Webformulare im SELFHTML-Wiki
• Bessere Formulare dank HTML5 und CSS3. In: iX

Einzelnachweise

1. DIN EN ISO 9241-143; Nr. 3.9