Erstellen von Formularen mit HTML

Auf den meisten Webseiten sind Formulare implementiert, über die die Benutzer Eingaben vornehmen können und die Daten per E-Mail und/oder an eine Anwendung verschickt werden. Dabei werden überwiegend folgende Formularfelder eingesetzt.

Textfeld: Für die Eingabe einzeiliger Texte.
Mehrzeiliges Textfeld: Für die Eingabe mehrzeiliger, langer Texte in einem Textbereich..
Kontrollkästchen: Können die zwei Zustände Aktiviert/Deaktiviert annehmen und sind optional.
Auswahlmenü: Werden auch Dropdown-Listen genannt. Dienen zur Auswahl von einem oder mehreren Werten.
Optionsfeld: Aus einer Gruppe ist nur eine Auswahl möglich.
Dateifeld: Zum Übertragen von Dateien.
Schaltfläche: Zum Auslösen verschiedener Aktionen, z.B. Abschicken der Nachricht.

Nachfolgend ist ein typisches Beispielformular abgebildet.

Erstellung des Formulars und Verarbeitung der Daten

Mit den entsprechenden Tags (FORM, INPUT etc.) kann mit HTML sehr schnell ein Formular erstellt werden. Am Anfang ist man jedoch häufig verwundert darüber, dass die Formulardaten nicht per E-Mail verschickt werden. Hierbei muss die gesamte Kette mit Eingabe, Verarbeitung und Ausgabe betrachtet werden. Allein mit HTML ist nur die Eingabe möglich, worunter auch zunächst das Abschicken des Formulars gezählt werden kann.

Danach muss nämlich "irgendeine Programmierlösung", z.B. mit ASP, Perl oder PHP, die Formulardaten entgegennehmen, prüfen, verarbeiten und in Form von E-Mails oder Datenbankeinträgen etc. ausgeben. Das bedeutet, mit der Erstellung eines Formulars ist die Arbeit nicht beendet, sondern sie beginnt damit erst, weil man für die Verarbeitung und Ausgabe etwas programmieren muss. HTML ist keine Programmiersprache, weshalb diese Schritte mit HTML nicht möglich sind. Welche Programmiersprache man verwendet, hängt von den persönlichen Kenntnissen, Vorlieben, dem verwendeten Webserver mit den verfügbaren Interpretern, der verwendeten Sprache auf den übrigen Webseiten etc. ab. Wenn die übrigen Seiten z.B. mit PHP erstellt wurden, dann bietet es sich an, für die Verarbeitung und Ausgabe des Formulars auch PHP zu verwenden.

Auf der folgenden Abbildung ist eine Beispielkonstellation und die Schritte können wie folgt gedeutet werden:

Eingabe: Auf der Webseite formular.html wurde mit den FORM- und INPUT-Tags ein Formular erstellt. Der FORM-Tag enthält das Attribut action="verarbeitung.php". Damit wird angegeben, dass die Formulardaten an verarbeitung.php verschickt werden sollen. Ausgelöst werden kann der Schritt über eine Abschicken-Schaltfläche.
Verarbeitung und Ausgabe: Auf der Seite verarbeitung.php obliegt es dem Programmierer, die Entgegennahme, Prüfung, Verarbeitung und Ausgabe zu programmieren. Die Ausgabe kann nicht nur die Versendung einer E-Mail sein, sondern auch Datenbankeinträge, Übertragung der Daten an einen Webserver etc.

In diesem Beispiel ist die Programmierlösung mit PHP erstellt und heißt verarbeitung.php. Natürlich kann sie auch anders benannt werden. Man muss nur darauf achten, dass das Attribut (action="...") im FORM-Tag auch entsprechend richtig gesetzt wurde.

Formular erstellen mit FORM-Tag

Auf einer Webseite wird ein Formular mit dem FORM-Tag erstellt. Alle Formularfelder werden zumindest bis HTML4 innerhalb des FORM-Tags eingefügt. Mit HTML5 ist das nicht mehr zwingend notwendig und man kann ein Formularfeld auch außerhalb des FORM-Tags platzieren. Neben dem Attribut action="..." können weitere Attribute hinzugefügt werden, z.B. die ID des Formulars. So kann man auf einer Webseite mehrere Formulare erstellen und die Unterscheidung kann über die Formular-ID erfolgen. Ein Beispielcode für ein Formular ohne Formularfelder. Diese müssten noch eingefügt werden.

<form action="verarbeitung.php" id="formularid">


<!--In diesem Bereich werden die Formularfelder eingefügt. -->


</form>

Der FORM-Tag stellt somit das Gerüst für das Formular dar und umschließt alle darin enthaltenen (bis HTML4) bzw. außerhalb zugeordneten (ab HTML5) Formularfelder, die z.B. wie auf den folgenden Seiten beschrieben, eingefügt werden können.

Für die meisten Formularfelder wird der INPUT-Tag verwendet. Der Typ des Formularfelds wird über das Attribut des INPUT-Tags festgelegt. Somit ist dieses Element zunächst ein leeres Element und erhält erst durch das Attribut die entsprechende Typfestlegung. Ohne die Angabe des Attributs wird ein Textfeld für einzeilige Texteingaben erzeugt. Das Aussehen der Formularfelder kann geändert werden, wofür Vorzugsweise CSS genutzt werden sollte.

Formularfelder mit HTML5

Die Möglichkeiten bei der Erstellung und Gestaltung von Formularen sind mit HTML5 zum Teil erheblich erweitert worden. Beispielsweise kann man ein Auswahlfeld für ein Datum erstellen und die Benutzer können das Datum aus einem Kalender auswählen, statt über die Tastatur einzugeben. Solche nützlichen Features sind in den Browsern jedoch zum Teil unterschiedlich implementiert worden und man sollte sie beim Gebrauch mit den verschiedenen Browsern testen.

Sicherheit bei Formularen

Der eigentliche Programmierbefehl, z.B. in PHP, ist im Grunde nicht schwierig und man könnte auch mit wenig Programmierkenntnissen dafür sorgen, dass die Formulardaten per E-Mail übertragen werden. Allerdings birgt das ein sehr hohes Sicherheitsrisiko. Viele Webseiten sind nämlich ständig Angriffen ausgesetzt, wofür sehr häufig die vorhandenen Formulare missbraucht werden. Beispielsweise könnte man über ein Formular, das eigentlich für die Versendung von Nachrichten bereitgestellt wurde, Programmierbefehle einfügen und SPAM-Mails verschicken. Zum Teil laufen solche Angriffe komplett automatisiert über sogenannte Bots ab. Daher besteht die eigentliche Arbeit bei der Erstellung der Programmierlösung darin, die übertragenen Formulardaten zu prüfen und sicherheitstechnisch abzusichern, so dass die Risiken zumindest minimiert werden, auch wenn es keine 100%ige Sicherheit geben kann.

Ungeprüft sollten keinerlei Formulardaten verarbeitet werden und die Prüfung sollte serverseitig erfolgen. Mit HTML5 sind einige Änderungen hinzugekommen, sodass z.B. Gültigkeitsprüfungen möglich sind. Beispielsweise kann man einem Textfeld vorgeben, dass nur Zahlen erlaubt sind und die Gültigkeitsprüfung ist dabei dem Browser überlassen. Solche Funktionen, die nur mit HTML5 realisiert werden und vom verwendeten Browser abhängen, sind jedoch lediglich als eine kleine Hilfestellung für den Benutzer beim Ausfüllen zu sehen und ersetzen nicht die serverseitige Prüfung über eine Programmierlösung. Man könnte nämlich einen älteren Browser aus einer Zeit vor HTML5 verwenden und die Gültigkeitsprüfungen ganz leicht umgehen. Dasselbe betrifft etwaige Gültigkeitsprüfungen per JavaScript, die ebenfalls clientseitig ausgeführt werden. Es ist möglich, in Browsern JavaScript zu deaktivieren und danach beliebige Daten über die Formulare zu übertragen. Deshalb ist die serverseitige Prüfung notwendig.