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.
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:
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.
> 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>
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.
Echt super! Hatte keinerlei Vorkentnisse, und hab bis jetzt nicht einmal gewusst was HTML eigtl. ist. Bis ich heute angefangen hab, den, nennen wirs mal <i>Lehrgang</i>, durchzulesen. Bis jetzt hab ich alles selber hinbekommen. Und Formulare zu machen, macht ein höllenspaß, nur ist mir der Unterschied zwischen dem Methoden "post" und "get" nicht so ganz klar. Auch habe ich es mal mit "get" probiert, aber das sieht auch gleich aus. Kann es sein, dass es nur ein Unterschied bei der Zieldatei macht? Weil ich hab das noch mit keiner gültigen Ziedatei gemacht. Aber hier steht was von einer sichtbaren und unsichtbaren <b>ÜBERTAGUNG</b>. Wie soll ich mir eine für den Benutzer sichtbare Übertragung vorstellen? Wenn es jemand verstanden hat, kann ers ja noch im Komentarteil ergänzen, oder vlt. auch noch der Autor ergänzen.
---> Ansonsten: <font size="+2"><b>TOP</b></font>
MEMBERS LOGIN
SEITE DURCHSUCHEN
