Formulare zum Datenversand

Wichtig für jede Homepage ist auch die Verarbeitung von Formularen, doch bevor diese verarbeitet werden muss erst ein Formular aufgebaut werden.

HTML bietet hierfür verschiedene Möglichkeiten an - von Klickbuttons über verschiedene Textfelder bis zum Sende- / Rücksetzbutton.

Anders sieht es mit dem Versand selbst aus - hier gibt es nur zwei Möglichkeiten - die Methode GET und die Methode POST.

Auch wenn die Methode POST die etwas unsichere Methode ist, so ist sie die einfachste Methode und für private und kleinere Firmenhomepages daher die Sinnvollere.

Wichtig bei der Methode POST - kein Versand von wichtigen persönlichen oder betrieblichen Angaben zu tätigen, insbesondere Passwörter und Benutzernamen (und ähnliches) sollten mit dieser Methode nicht gesendet werden.

Doch kommen wir erst einmal zu den Grundlagen des Versandes - den Eingabefeldern.

Fangen wir mit dem Radiobutton an, welcher für Auswahlmöglichkeiten gedacht ist und folgender Maßen aussieht:

Auswahl 1 | Auswahl 2 | Auswahl 3
Quelltext dazu:
<input type="radio" name="auswahl" value="auswahl1"> Auswahl 1 | <input type="radio" name="auswahl" value="auswahl2"> Auswahl 2 | <input type="radio" name="auswahl" value="auswahl3"> Auswahl 3

Diese Buttons kann man noch Vorselektieren mit der Anweisung checked="checked", was wie folgt aussieht:
Auswahl 1 | Auswahl 2 | Auswahl 3
Quelltext dazu:
<input type="radio" name="auswahl" value="auswahl1"> Auswahl 1 | <input type="radio" name="auswahl" value="auswahl2" checked="checked"> Auswahl 2 | <input type="radio" name="auswahl" value="auswahl3"> Auswahl 3

Wichtig für die Formularverarbeitung ist hier der Name (name="") und der Wert (value="").

Ähnlich dazu sind Checkboxen, der Unterschied ist hier das Aussehen und das anstatt eines Punktes ein Haken gesetzt wird und das hier alle Felder gesetzt werden können.
Beispiel für Checkboxen:
Salami | Pilze | Sardellen
Quelltext dazu:
<input type="checkbox" name="zutat" value="salami"> Salami | <input type="checkbox" name="zutat" value="pilze"> Pilze | <input type="checkbox" name="zutat" value="sardellen"> Sardellen

Wieder wichtig für die Formularverarbeitung ist hier der Name (name="") und der Wert (value="").

Eine weitere Form zur Eingabe in Formularen sind Auswahllisten, gerade beim E-Mail Versand für den Betreff sehr interessant (aber nicht nur).

So sieht eine Auswahlliste aus:

und der Quelltext dazu:
<select name="top5" size="1">
  <option>Heino</option>
  <option>Michael Jackson</option>
  <option selected>Tom Waits</option>
  <option>Nina Hagen</option>
  <option>Marianne Rosenberg</option>
</select>

Wieder wichtig ist für die Formularverarbeitung der Name (name=""). Die Angabe "size" setzt die sichtbaren Werte im Feld (hier eingestellt 1) und selected im Feld option wählt diesen Wert vor.

Als nächstes kommen wir zu den Texteingabefeldern und beginnen mit einem einzeiligen Eingabefeld (zum Beispiel für Namen).

So sieht es aus
gebe Deinen Nachnamen ein
der Quelltext dazu

<input type="text" name="nachname" size="30"> gebe Deinen Nachnamen ein

Auch hier ist für den Versand der Name (name="") wieder wichtig. Mit "size" kannst Du die Länge des Feldes bestimmen.

Mehrzeilige Texteingabefelder sind wichtig für die Nachricht des Betreffenden, was wie folgt aussieht

Quelltext dazu
<textarea name="nachricht" rows="4" cols="50"></textarea>

Wichtig auch hier wieder für den Versand - der Name (name="") und der abschließende Tag (</textarea>) für die saubere Funktion in HTML.
Mit "rows" wird die Zeilenzahl (indirekt damit die Höhe) und mit "cols" die Zeichenzahl (indirekt damit die Breite) des Feldes bestimmt.

Nun brauchst Du noch einen Button um das Formular zu senden, was wie folgt aussieht:

Quelltext dazu:
<input type="submit" name="senden" value=" Absenden ">

Hier muss der Name nicht angegeben werden, ist aber für die Auswertung des Formulars nicht von der Hand zu weisen.

Versteckte Element in Formularen kann man so nicht anzeigen, denn sonst wären sie ja nicht versteckt - wohl aber den Quelltext dazu:
<input type="hidden" name="abgeschickt" value="ja">

Nach dem wir nun fast alle Eingabemöglichkeiten kennen gelernt haben nun noch die Angaben zum Versand:
<form action="auswertung.php" method="post" enctype="text/plain">
  <!-- Hier folgen jetzt Deine Eingabefelder (Auswahl oben) -->
</form>

Mit action="" legst Du den Versand an diese Datei fest, methode="post" bestimmt die Methode POST und mit enctype="text/plain" bestimmst Du, das der Text nicht umgewandelt werden soll (kann aber auch unter bestimmten Voraussetzungen entfallen). Vergesse nicht mit </form> das Formular zu beenden!

Die Formularfelder selbst kannst Du natürlich in eine Tabelle oder in Blöcke setzen um eine bessere Ausrichtung zu bekommen.

Zum Verarbeiten des Formulars selbst und dessen Versand zum Beispiel als E-Mail benötigst Du noch eine Datei (hier "auswertung.php"), die das Ganze übernimmt.
Neben PERL bietet auch PHP den E-Mail Versand an - wie das geht findest Du dann unter "PHP-Scripte".

PS: Auch die Eingabefelder können mit CSS bestimmt werden, Klasse vergeben, Werte angeben (zum Beispiel Hintergrundfarbe, ...), Klasse im Quelltext angeben.