9. Formulare [1]

Diesen Tipp in Originalversion zeigen.

9. Formulare [1]

Formulare haben im Internet eine große Bedeutung. Denn mit Hilfe von Formularen können Daten, die der User eingibt, verarbeitet werden.
Auch Foren oder Suchen beinhalten Formulare. Wie Sie sehen, sind Formulare also wichtig im Internet.

Woraus besteht ein Formular überhaupt?

Formulare bestehen aus verschiedenen Elementen, zum Beispiel aus einem Textfeld, wo der Benutzer Texte eingeben kann und aus einer Radiobox, wo der Benutzer eine Sache auswählen kann.
Durch Formulare wird es möglich mit dem Benutzer in Verbindung zu treten und seine Eingaben und Daten zu bekommen.

Jedes Formular wird mit dem <form>-Tag eingeleitet, welcher das ganze Formular umschließt.
Für den <form>-Tag gibt es zwei wichtige Attribute, die wir uns näher ansehen sollten.

- Action

Das "action"-Attribut definiert die Zieldatei, wohin das Formular geschickt werden soll, also die Datei, die das Formular anschließend bearbeitet.

- Method

Das Attribut "method" definiert die Methode (also Art und Weise) wie die Daten übertragen werden.
Dabei gibt es zwei Methoden zur Auswahl: POST und GET.

Bei GET werden die Daten des Formulars an die Adresse angehängt, test.php?variable1=test1&variable2=testxyz ist ein Beispiel für eine solche Adresse.
Dabei trennt ein Fragezeichen die eigentliche Adresse von den zu übergebenden Daten. Die einzelnen Inhalte werden den Feldernamen durch ein Istgleich (=) zugewiesen, die Felder wiederum sind durch ein kaufmännisches Und (&) getrennt.
Obwohl die GET-Methode standardmäßig eingestellt ist, möchte ich Ihnen davon sehr abraten. Da die Daten nämlich in der URL mit angehängt werden, kann dies bei einer bestimmten Länge zu Problemen führen (oft ist die Gesamtlänge der URLs auf 1024 Zeichen beschränkt).

Bei der POST-Methode, die ich Ihnen empfehle, können unbegrenzt viele Daten übergeben werden. Dabei erfolgt die Datenübertragung unsichtbar für den User (d. h. er sieht diese nicht in der Adressleiste seines Browsers).

Im Folgenden ein Beispiel für den Grundaufbau eines Formulars:

> Listing 9.1: Grundaufbau eines Formulars

Die Werte der Formularfelder werden beim Absenden des Formulars übermittelt. Meist werden sie mit dem <input>-Tag dargestellt.
Dabei ist das wichtigste Attribut am Anfang "type". Es gibt an, welches Formularfeld der <input>-Tag ist (z. B. Textfeld oder Auswahlfeld).
Der <input>-Tag wird nicht wieder geschlossen!
Wird dem Attribut "type" beispielsweise der Wert "text" zugewiesen, so erscheint am Bildschirm etwas ganz anderes, als bei dem Wert "radio".
Wichtige Werte für das Attribut "type" (sehen Sie sich das unten folgende Online-Beispiel an, falls Sie sich das Aussehen eines Feldes nicht vorstellen können):

text	Erzeugt ein einzeiliges Textfeld, in welches der Benutzer etwas eingeben kann.
password	Erzeugt ein einzeiliges Textfeld mit dem Unterschied, dass das Eingegebene nicht am Bildschirm lesbar angezeigt wird (Passwortfeld).
checkbox	Erzeugt eine Checkbox. Eine Checkbox ist ein viereckiges Feld, wobei der Benutzer dieses Anklicken kann, sodass darin ein Haken erscheint. Es wird im Internet oftmals verwendet, um sicherzustellen, dass der Benutzer etwas gelesen hat.
radio	Erzeugt eine Radiobox. Dabei wird dem Benutzer die Möglichkeit gegeben eine von mehreren Radioboxen auszuwählen.
submit	Erzeugt einen Absende-Button. Sobald der Benutzer diesen Button betätigt, wird das Formular an die, in dem "action"-Attribut des <form>-Tags angegebene, Datei versendet.

Bedenken Sie bitte, dass mit dem <input>-Tag nur ein einzeiliges Textfeld erstellt werden kann.
Damit die Benutzereingaben später verarbeitet werden können (z. B. mit PHP), müssen Sie jedem Formularfeld einen eindeutigen Namen (der frei erfunden sein kann) mit dem "name"-Attribut zuweisen (welches Sie noch vom <a>-Tag kennen sollten).
Bei den Radioboxen gibt es eine kleine Besonderheit: Der Benutzer kann nur zwischen den Radioboxen wählen, die denselben Namen haben. Möchten Sie dem Benutzer also beispielsweise drei Auswahlmöglichkeiten zur Verfügung stellen, so müssen alle drei Auswahlmöglichkeiten denselben Name bekommen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formularfelder</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
Textfeld (einzeilig): <input type="text" name="test"><br><br>
Passwortfeld: <input type="password" name="pass"><br><br>
Checkbox: <input type="checkbox" name="check"><br><br>
Radiobox: <input type="radio" name="g"><br><br>
<input type="submit">
</form>
</body>
</html>

> Listing 9.2: Übersicht der wichtigsten Formularfelder mit <input> (Online-Beispiel / Download)

Hinweis: Bedenken Sie bitte, dass alle Formulare, die Sie hier sehen, keinen weiteren Sinn haben, da die verarbeitende Datei fehlt.
Bei einem Klick auf den Absende-Button werden Sie deshalb eine "Datei nicht gefunden" - Meldung erhalten.

Mit dem Attribut "value" können Sie bei einem Textfeld und Passwortfeld den Text definieren, der dort standardmäßig angezeigt wird wenn die Seite aufgerufen wird (also der vordefinierte Wert).
Bei einer Checkbox, Radiobox und dem Absende-Button wird der in "value" angegebene Wert beim Absenden des Formulars je nach Benutzereingaben übermittelt.
Das heißt der "value"-Wert wird bei der Checkbox übermittelt, falls der Benutzer den Haken gesetzt hat, bei der Radiobox wird der "value"-Wert der markierten Radiobox übermittelt und beim Absende-Button der "value"-Wert des Buttons, der betätigt wurde (nur wichtig, falls es mehrere Buttons gibt).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formular-Beispiel</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
Vorname: <input type="text" name="vorname" value="Vorname"><br><br>
Passwort: <input type="password" name="pass" value="Passwort"><br><br>
Macht es Spaß? <input type="checkbox" value="spass"><br><br>
Wählen Sie Ihr Geschlecht: <input type="radio" name="geschlecht"> männlich | <input type="radio" name="geschlecht"> weiblich<br><br>
<input type="submit"><br><br>
</form>
</body>
</html>

> Listing 9.3: Formular-Beispiel mit "value"-Werten (Online-Beispiel / Download)

Zusammengefasst	Formulare sind ein wichtiger Bestandteil des Internets, da Sie die Kommunikation mit dem Benutzer ermöglichen.
	Jedes Formular wird mit dem <form>-Tag eingeleitet, welcher das ganze Formular umschließt.
	Das "action"-Attribut eines <form>-Tags gibt die Zieldatei an, die das Formular verarbeitet und wohin das Formular letztendlich gesendet wird.
	Die Methode (Art und Weise), wie das Formular versendet werden soll, gibt das "method"-Attribut des <form>-Tags an. Mögliche Werte sind "post" (für den Benutzer unsichtbare Übertragung) und "get" (für den Benutzer sichtbare Übertragung; Daten werden an Adresszeile angehängt).
	Formularelemente werden durch den <input>-Tag ausgedrückt. Das "type"-Attribut gibt an, welches Formularfeld letztlich dargestellt werden soll ("text" = Textfeld; "password" = Passwortfeld; "checkbox" = Checkbox; "radio" = Radiobox; "submit" = Absende-Button).
	Zur späteren Verarbeitung des Formulars muss jedes Formularfeld einen einzigartigen Namen über das "name"-Attribut erhalten. Das "value"-Attribut gibt den voreingestellten Wert des Formularfelds an bzw. welcher Wert gesendet wird, je nach Benutzereingaben.

Weiter zu Teil 10 (Formulare [2]) > (as)

Copyright (c) 2002-2005 by Andreas Schroth

URL: www.computer-tipps.net/webdesign170.html