Formulare

Formulare bekommen eine immer größere Bedeutung, da die Besucher nicht nur mal eine Mail schreiben können. Der Webstandart 2 und 3 besagt, dass die Nutzer regelrecht interagieren können.

In diesem Kurs reicht es uns wenn wir in der Lage sind ein einfaches Formular zu generieren und abzusenden.

Werden Formulare übertragen, müssen wir entscheiden welche Methode wir wählen.

Methode POST oder GET

Es gibt zwei unterschiedliche HTTP-Methoden, mit denen man die Formulardaten an den Server übermitteln kann. Diese werden mit POST und GET bezeichnet. Ohne hier auf die technischen Aspekte einzugehen, gilt die Faustregel: Ist es der vorrangige Sinn des Formulars, Daten vom Server abzurufen (z.B. eine Suchanfrage), so verwendet man GET; ist der Hauptzweck eher das Übermitteln von Daten zum Server (z.B. das Abschicken einer Bestellung an einen Online-Shop), so verwendet man POST.

Die GET-Methode ist der voreingestellte Wert (default), der automatisch gilt, wenn kein method-Attribut notiert wurde. Möchte man die POST-Methode nutzen, so muss method="post" im öffnenden form-Tag notiert werden.
Die Daten werden im Adressfeld des Browsers sichtbar.

POST-Anfragen übertragen ihre Daten nicht im URL, sondern auf eine andere Weise.

Deshalb würden Sie bei method="post" Ihren Suchbegriff in der Adresszeile nicht finden.

Im Folgenden möchten wir ein kleines Formular zusammenstellen, das dem User die Möglichkeit bietet eine Nachricht zu übermitteln.

Wir leiten unser Formular mit dem Tag <form ein und geben die Übermittlungsmethode an method="post" gefolgt von einen Auswertungs-Script oder gleich, wie in diesem Falle von einer E-Mail Adresse. Dazu wird das Protokol mailto:“email@provider.de“ > aufgerufen.

Ganze Zeile:
<form method="post" action="mailto:root@mailto:127.0.0.1"> Nun folgen die Felder die wir strukturieren mit <selection>:


Wir wollen die Anrede so gestalten, dass entweder Herr oder Frau ausgewählt werden kann.

Dies erreichen wir mit „Ratio“

Für die Personendaten Vorname Zuname und E-Mail werden wir einfache Textfelder verwenden.

Bein Nachnamen setzen wir ein ( * ) nach dem Label da wir dieses Feld als Pflichteingabe kenntlich machen wollen. <label>Nachname *</label>

Soll der Besucher eine Mehrzeilige Nachricht an uns senden dürfen nutzen wir die Funktion textarea.

Nun möchten wir eine Mehrfachauswahl zulassen.

Mit dem name="Infos" garantieren wir die Zuordnung der Checkboxen

Mit <input type="submit" value="Ab dafür"> sorgen wir für einen Absende-Button mit Beschriftung.

Das gesamte Formular sieht wie folgt aus:

Unser Browserergebnis wird nicht unbedingt preisverdächtigt daherkommen, aber es funktioniert.