Websiteentwicklung: XHTML: Formulare
Aus Wikibooks
Inhaltsverzeichnis |
Bei interaktiven Webseiten sind Formulare eine Selbstverständlichkeit. Mit Hilfe von Formularen können die Surfer beispielsweise einen Gästebucheintrag vornehmen, chatten, an Abstimmungen teilnehmen, usw. Die Möglichkeiten sind fast unbegrenzt. Dabei dienen die Formulare nur zur Eingabe von Daten. Die Verarbeitung muss dann auf der Serverseite oder per JavaScript erfolgen.
[Bearbeiten] Übertragungsarten
Für die Übertragung der Daten zum Server gibt es zwei Möglichkeiten: Die GET- und die POST-Methode.
Bei der GET-Methode werden die Daten als Teil der URL verschickt. Eine solche URL sieht typischerweise wie folgt aus:
http://www.webseitenname.de/seite.php?Name=peter&Vorname=muster
Die URL besteht hierbei aus zwei Abschnitten: Der eigentlichen Adresse und den zu übermittelnden Daten. Beide Teile sind durch ein Fragezeichen getrennt.
Bei der POST-Methode werden die Daten als Datenstrom übertragen. Dabei bleiben sie für den Anwender unsichtbar.
Jede der beiden Methoden hat ihre Vor- und Nachteile: Über die GET - Methode sollten keine sicherheitsrelevanten Daten wie Passwörter verschickt werden. Auch für größere Datenmengen ist die GET-Methode ungeeignet. Allerdings hat sie gegenüber der POST-Methode den Vorteil, dass der Benutzer auf die Seite ein Bookmark setzen kann, und dass eine Verlinkung von anderen Seiten aus möglich ist.
[Bearbeiten] Aufbau eines Formulars
Die Definition eines Formulars erfolgt zwischen den Tags <form> und </form> . Dazwischen befinden sich Tags zum Eingeben des Textes, Auswählen einer Option usw., und - natürlich ganz wichtig - eine Schaltfläche zum Bestätigen der Eingabe. Es sind aber auch andere HTML-Tags erlaubt, wie zum Beispiel der <table> -Tag, so dass es möglich ist, die Elemente des Formulars mit Hilfe einer Tabelle anzuordnen.
Das form-Tag hat die folgenden Attribute:
| action="..." | Unter Action geben Sie in der Regel die Quelle des Codes an, der die Daten verarbeitet. |
| method="..." | Mit diesem Attribut geben Sie an, ob die Daten über die GET- oder die POST-Methode übermittelt werden sollen. |
| name="..." | Name des Formulars |
[Bearbeiten] Texteingabefelder
Die Eingabe von Daten erfolgt häufig durch Texteingabefelder. Diese werden über den <input /> -Tag erzeugt. Das <input /> -Tag hat kein schließendes Tag. Alle Angaben zum Aussehen des Texteingabefelder werden in den Attributen durchgeführt:
| type="..." | Dieses Attribut legt die Art des Eingabefeldes fest. Für ein Texteingabefeld ist der Typ "text". Die Groß- und Kleinschreibung spielt keine Rolle. |
| name="..." | Mit diesem Attribut legen Sie den Namen des Feldes fest. Der Wert sollte der Namenskonvention für Variablen entsprechen, da der Inhalt des Eingabefelds nachher unter diesem Namen ansprechbar ist. |
| size="..." | Diese Zahl bestimmt, wie breit das Eingabefeld ist. Auch hier muss der Wert numerisch sein. |
| maxlength="..." | Dieses Attribut bestimmt die maximale Anzahl Zeichen, die eingegeben werden dürfen. Wird die maximale Länge nicht angegeben, so können beinahe beliebig viele Zeichen eingegeben werden. |
| value="..." | Mit diesem Attribut können Sie einen vordefinierten Text in das Eingabefeld einfügen, der dann standardmäßig beim Laden angezeigt wird. |
Die Attribute type und name müssen verwendet werden. Alle anderen Attribute sind optional.
[Bearbeiten] Beispiel
<b>Ihre Adresse:</b><br />
<form action="seite.php" method="post">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="Name" size="20" maxlength="20" /></td>
</tr>
<tr>
<td>Vorname:</td>
<td><input type="text" name="Vorname" size="20" maxlength="20" /></td>
</tr>
<tr>
<td>Strasse:</td>
<td><input type="text" name="Strasse" size="20" maxlength="30" /></td>
</tr>
<tr>
<td>PLZ, Ort:</td>
<td>
<input type="text" name="PLZ" size="3" maxlength="5" />
<input type="text" name="Ort" size="13" maxlength="20" />
</td>
</tr>
</table>
<input type="submit" name="Senden" value="Abschicken" />
<input type="reset" value="Daten löschen" />
</form>
Tipp: Wollen Sie ein Eingabefeld für Passwörter, dann schreiben Sie als Wert bei type "password". Der Rest funktioniert dann genau gleich wie bei normalen Textfeldern. Anstelle des Textes werden dann Sternchen ausgegeben. Einige Browser bieten außerdem an, das Passwort zu speichern. Bitte beachten Sie, dass die Übertragung des Passwortes nicht verschlüsselt erfolgt.
[Bearbeiten] Schaltflächen
Am Ende des Formulars aus Beispiel 1 sehen sie neben dem Eingabefeld zusätzlich zwei Schaltflächen (auch als Buttons bezeichnet) zum Abschicken sowie zum Löschen der Felder. Zum Erstellen von Schaltflächen benutzen sie wiederum das <input /> -Tag, nur mit dem Unterschied, dass das Attribut type diesmal nicht den Wert text hat.
Stattdessen kann type die folgenden Werte annehmen:
| submit | Diese Art input wird zum Abschicken des Formulars (der Daten) verwendet |
| reset | Diese Art input löscht den Inhalt aller Formularfelder, so dass man von vorne beginnen kann. |
| button | Diese Art input definiert eine Schaltfläche, die noch keine Funktionalität besitzt. Diese erhält sie erst beispielweise durch ein Javascript Programm. |
[Bearbeiten] Mehrzeilige Textfelder
Nun möchten Sie ja auch Textfelder generieren, die sich über mehrere Zeilen erstrecken. Auch das ist möglich. Dazu brauchen Sie ein neues Tag, das Sie anstelle des input-Tags schreiben können.
[Bearbeiten] Beispiel 1
<form action="seite.php" method="post"> <input type="text" name="name" value="Ihr Name" size="54" maxlength="30"><br /> <textarea name="text" cols="40" rows="10"> Ihren Gästebucheintrag können Sie hier hineinschreiben! </textarea><br /> <input type="submit" name="senden" value="Abschicken"/> </form>
[Bearbeiten] Erklärung
Hier sehen Sie jetzt den Gebrauch des neuen Tags textarea. Es ist ähnlich aufgebaut wie das input-Tag. Hier gibt es jedoch kein maxlength, size und value-Befehl. Die Eingabelänge bei mehrzeiligen Eingabefeldern ist unbegrenzt. Den size-Befehl gibt es auch nicht mehr, da die Größenangabe jetzt 2-dimensional sein muss. Hierfür gibt es die Befehle cols="...", mit dem Länge festgelegt wird, und rows="...", mit dem die Höhe festgelegt wird. Als Wert schreiben Sie wiederum eine Zahl. Wie groß diese sein muss, finden Sie mit Ausprobieren heraus. Bei rows ist der Wert die Anzahl der Zeilen. Der value-Befehl wird auch anders kompensiert. Da das textarea-Tag abgeschlossen wird, schreiben Sie den Text, den Sie direkt darstellen möchten, einfach zwischen das Anfangs und Ende-Tag. Es sind jedoch keine weiteren Tags erlaubt, die den Text formatieren. (z. B. <br />, <b>, ...)
Es gibt auch Formulare, in denen Sie etwas auswählen und Optionen markieren können. Als erstes erkläre ich die Auswahlliste. Dazu nehme ich ein Beispiel, bei dem der Surfer ein Land auswählen soll.
[Bearbeiten] Beispiel 2
<form action="seite.php" method="post"> Wählen Sie ein Land aus:<br /> <select name="land" size="5"> <option value="Deutschland">Deutschland</option> <option value="Frankreich">Frankreich</option> <option value="Italien">Italien</option> <option value="Lichtenschtein">Lichtenstein</option> <option value="Oesterreich">Oesterreich</option> <option value="Schweiz">Schweiz</option> <option value="Spanien">Spanien</option> </select><br /> <input type="submit" name="senden" value="OK"/> </form>
[Bearbeiten] Erklärung
Auch hier wird das Formular, wie Sie es gelernt haben, eingeleitet. Nun kommt ein select-Tag. Das sagt dem Browser, dass nun ein Auswahlmenü folgen wird. Im select-Tag gibt es die zwei Befehle name, um einen Namen für die spätere Bearbeitung zu haben, und size. Dieser Befehl legt fest, wieviele Auswahloptionen auf einmal sichtbar sind. Dann kommen die option-Tags. Jedes Tag definiert eine neue Auswahloption. Dieses Tag kennt noch den Befehl value, der hier gebraucht wird, um Werte dem Verarbeitungsprogramm zu übergeben. Dieser value-Befehl wird also nicht gebraucht, damit der Surfer einen Begriff sieht für die Auswahl. Dieser Begriff, den der Surfer sehen kann, kommt dann später. Er muss nicht mit dem Wert des value-Befehls übereinstimmen. Zum Schluss wird die Auswahloption abgeschlossen. Sie können beliebig viele Auswahloptionen definieren. Ganz am Ende finden Sie wieder den schon bekannten Abschick-Button.
Nun gibt es auch noch Radiobuttons und Checkboxen:
[Bearbeiten] Beispiel 3
<form action="seite.php" method="post"> Wählen Sie ein oder mehrere Länder aus:<br /> <input type="Checkbox" name="Land" value="deutschland">Deutschland</input><br /> <input type="Checkbox" name="Land" value="frankreich">Frankreich</input><br /> <input type="Checkbox" name="Land" value="italien">Italien</input><br /> <input type="Checkbox" name="Land" value="oesterreich">Oesterreich</input><br /> <input type="Checkbox" name="Land" value="schweiz">Schweiz</input><br /> <br /> Wie alt sind Sie?<br /> <input type="Radio" name="Alter" value="1">0 - 18 Jahre</input><br /> <input type="Radio" name="Alter" value="2">19 - 35 Jahre</input><br /> <input type="Radio" name="Alter" value="3">36 - 50 Jahre</input><br /> <input type="Radio" name="Alter" value="4">50 - 65 Jahre</input><br /> <input type="Radio" name="Alter" value="5">über 66 Jahre</input><br /> <br /> <input type="Submit" name="senden" value="Abschicken"/> </form>
[Bearbeiten] Erklärung
Sie sehen, dass hier mit dem input-Tag gearbeitet wird, das Sie bereits kennengelernt haben. Nur der Wert beim Befehl type ist anders. Und Sie sehen, dass hier der gleiche Name mehrere Male vorkommt. Zusätzlich ist ein value-Befehl obligatorisch und das Tag wird auch wieder abgeschlossen.
Der Typ "checkbox":
Bei diesem Typ haben die Surfer die Möglichkeit, mehrere Optionen gleichzeitig auszuwählen. Pro Auswahlgruppe wird aber ein einziger Name vergeben. Hier können Länder ausgewählt werden, also habe ich als Name "Land" genommen. Beim value-Befehl schreiben Sie dann den Wert, der bei den ausgewählten Optionen an das Verarbeitungsprogramm weitergegeben wird.
Der Typ "radio":
Hier kann der Surfer nur eine Möglichkeit auswählen. Der Rest ist genau gleich, wie beim Typ "checkbox".
[Bearbeiten] Gratulation!
Sie haben nun den XHTML-Grundkurs erfolgreich durchgearbeitet. Die weiteren Kapitel dienen als Ergänzung und enthalten letzte Erklärungen, wie Sie Ihre Dokumente 100%-ig XHTML-konform gestalten können.
Jetzt können Sie sich an Ihr eigenes großes Homepage-Projekt wagen. Erstellen Sie zum Beispiel eine kleine private Seite über Ihre Hobbies, Ihre Familie, usw. Sie sollten sich aber bewusst sein, dass Ihre Homepage weltweit einsehbar ist!
