26.10 HTML-Formulare
 
Mit den Umgebungsvariablen allein könnten Sie schon ein ganzes Arsenal von CGI-Anwendungen schreiben. Aber irgendwann werden Sie auch Daten eines HTML-Formulars auswerten wollen. Und darum geht es in diesem Abschnitt, nämlich um das Erstellen eines solchen Formulars. Natürlich handelt es sich dabei nur um einen groben Überblick. Sollten Sie mehr Wissen zu den HTML-Tags von Webformularen oder HTML im Allgemeinen benötigen, finden Sie im Anhang einige Links und Bücherempfehlungen.
26.10.1 Die Tags und ihre Bedeutung
Jetzt lernen Sie einige HTML-Tags kennen, mit denen Sie so genannte Webformulare erstellen können.
|
Hinweis Der Inhalt von HTML-Dateien befindet sich eingeschlossen in so genannten Tags. Ein Tag besteht zum einen aus dem HTML-Befehl selbst und zum anderen aus einer Kennzeichnung, ob es sich dabei um einen einführenden oder einen abschließenden HTML-Befehl handelt.
|
|
Der Bereich zwischen dem einführenden und dem abschließenden Tag wird als Gültigskeitsbereich bezeichnet. Als Beispiel hier die Tags, die Ihren Webbrowser anweisen, das angeforderte Dokument als HTML-Seite zu interpretieren und darzustellen:
<html> Das sehen Sie im Browser </html>
|
<form>-Tag
Diesen Tag werden Sie bei jedem Formular verwenden. Alle anderen Formular-Tags stehen zwischen den Tags <form> und </form>:
<form>
...
Formularinhalt
...
</form>
Folgende zwei Attribute des <form>-Tags sind von besonderem Interesse:
|
method – Wie der Name schon sagt, legen Sie damit fest, mit welcher Request-Methode Sie die CGI-Anwendung aufrufen. Meistens dürften dies die Methoden GET oder POST sein. Wird keine Methode angegeben, wird die GET-Methode verwendet. |
|
|
action – Damit geben Sie die URL der CGI-Anwendung an, mit der Sie beabsichtigen, die Formulareingaben zu bearbeiten. |
Somit könnte der <form>-Tag folgendermaßen aussehen:
<form action="./cgi-bin/auswert.cgi" method="POST">
...
Formularinhalt
...
</form>
<input>-Tag
Mit dem <input>-Tag können Sie eine Menge Formularobjekte erzeugen. Unterschieden werden diese durch das type-Attribut. Besonders wichtig für CGI-Anwendungen ist außerdem das Attribut name. Damit können Sie beim Auswerten eines Formulars auf den übergebenen Wert zugreifen. Jetzt zu den einzelnen Typen des <input>-Tags.
<input type="text">
So sieht es aus:
Hier klicken, um das Bild zu Vergrößern
Abbildung 26.14
Einzeiliges Eingabefeld
So wird es gemacht:
<input type=text name="name" size=32
maxlength=32 value="dein name">
Tabelle 26.11
<input> – Tag (Text)
| Bedeutung der Attribute
|
| size
|
Gibt die Breite des Textfeldes an.
|
| maxlength
|
Anzahl der Zeichen, die eingegeben werden können.
|
| value
|
Wert, der standardmäßig im Text erscheint. Wird dieses Attribut nicht verwendet, bleibt das Textfeld leer.
|
<input type="password">
So sieht es aus:
Hier klicken, um das Bild zu Vergrößern
Abbildung 26.15
Einzeiliges Passwortfeld
So wird es gemacht:
<input type=password value="abcdefg" size=16, maxlength=16>
Tabelle 26.12
<input> – Tag (Passwort)
| Bedeutung der Attribute
|
| Als Attribute werden dabei dieselben wie schon beim Textfeld (type=text) verwendet. Dieses Eingabefeld dient allerdings nur als Bildschirmschutz, denn bei der GET-Methode wird das Passwort unverschlüsselt im Query-String angezeigt.
|
<input type="radio">
So sieht es aus:
Hier klicken, um das Bild zu Vergrößern
Abbildung 26.16
Radiobuttons
So wird es gemacht:
<input type="radio" name="essen" value="Pizza" checked> Pizza<br>
<input type="radio" name="essen" value="Pommes"> Pommes<br>
<input type="radio" name="essen" value="Salat"> Salat<br>
Tabelle 26.13
<input> -Tag (Radiobuttons)
| Bedeutung der Attribute
|
| value
|
Dieser Wert wird, falls aktiviert, beim Request an die CGI-Anwendung mitgeschickt.
|
| checked
|
Dieses Attribut können Sie nur an einen Radiobutton in der Gruppe übergeben. In diesem Beispiel ist das die Gruppe essen.
|
<input type="checkbox">
So sieht es aus:
Hier klicken, um das Bild zu Vergrößern
Abbildung 26.17
Checkboxen
So wird es gemacht:
<input type="checkbox" name="zusatz" value="10000">
Nachnahme (+6 Euro)<br>
<input type="checkbox" name="zusatz" value="20000">
Express (+2 Euro)<br>
<input type="checkbox" name="zusatz" value="30000">
Versichert(+2 Euro)<br>
Tabelle 26.14
<input> – Tag (Checkboxen)
| Bedeutung der Attribute
|
| Die Checkboxen können ebenso verwendet werden wie schon die Radiobuttons, allerdings mit dem Unterschied, dass mit Checkboxen eine Mehrfachauswahl möglich ist. Natürlich kann man hier das Attribut checked ebenfalls mehrmals verwenden.
|
<input type="submit"> und <input type="reset">
So sieht es aus:
Hier klicken, um das Bild zu Vergrößern
Abbildung 26.18
Schaltflächen (Buttons)
So wird es gemacht:
<input type="Submit" name="sub" value="Abschicken">
<input value="Zurücksetzen" type="reset">
Tabelle 26.15
<input> – Tag (Schaltflächen)
| Bedeutung der Attribute
|
| Mit dem Button vom Typ Submit wird das Formular abgeschickt. Es wird also eine Anfrage an die URL gemacht, welche Sie im <form>-Tag beim action-Attribut angegeben haben. Das Attribut name macht beim Submit-Button eigentlich nur dann Sinn, wenn Sie mehrere Submit-Buttons für ein Formular verwenden. Mit dem Button vom Typ reset werden alle bisher veränderten Werte im Formular wieder auf ihren Ursprungszustand gesetzt. Die Beschriftung der beiden Buttons legen Sie mit dem Attribut value fest.
|
<texarea>-Tag
So sieht es aus:
Hier klicken, um das Bild zu Vergrößern
Abbildung 26.19
Mehrzeiliges Textfeld
So wird es gemacht:
<textarea name="textform" cols="32" rows="6">Textinhalt
</textarea>
Tabelle 26.16
<textarea> – Tag
| Bedeutung der Attribute
|
| Damit haben Sie einen Textbereich mit einer Breite von 32 Zeichen und sechs Spalten erstellt. Den Text, den Sie zwischen den Tags <textarea>text</textarea> schreiben, finden Sie in dem Textbereich wieder. Außer den für sich selbst sprechenden Attributen cols und rows können Sie noch das Attribut wrap verwenden. Damit können Sie angeben, ob und wie der Text am Zeilenende gebrochen werden soll. Als Parameter können Sie dazu verwenden : virtual, physical und none.
|
<select>-Tag
Mit dem <select>-Tag können zwei unterschiedliche Arten von Listen erzeugt werden. Welche Art, das bestimmen Sie mit dem Attribut size. Geben Sie für dieses Attribut den Wert 1 an, erstellen Sie ein Aufklappmenü. Geben Sie diesem Attribut beispielsweise den Wert 5, so haben Sie eine Scroll-Liste, mit fünf sichtbaren Elementen. Als Beispiel:
size=1
So sieht es aus:
Hier klicken, um das Bild zu Vergrößern
Abbildung 26.20
Listen (Aufklappmenü)
So wird es gemacht:
Seite bewerten:
<select name="Bewertung" size="1">
<option>Note 1</option>
<option>Note 2</option>
<option>Note 3</option>
<option>Note 4</option>
<option>Note 5</option>
<option>Note 6</option>
</select>
Tabelle 26.17
<select> – Tag
| Bedeutung der Attribute
|
| Mithilfe des <option>-Tags können Sie die möglichen Werte im Klartext schreiben, da der Tag <select> kein value-Attribut besitzt. Setzen Sie beim <option>-Tag zusätzlich noch das Attribut selected, können Sie dieses Element in der Liste als ausgewählt anzeigen lassen.
|
Die zweite Möglichkeit:
size= (>1)
So sieht es aus:
Hier klicken, um das Bild zu Vergrößern
Abbildung 26.21
Listen (Scrollbox)
So wird es gemacht:
Seite bewerten:
<select name="Bewertung" size="4">
<option>Note 1</option>
<option>Note 2</option>
<option>Note 3</option>
<option selected>Note 4</option>
<option>Note 5</option>
<option>Note 6</option>
</select>
Tabelle 26.18
<select> – Tag
| Bedeutung der Attribute
|
| Zusätzlich können Sie mit dem Attribut multiple beim <select>-Tag dafür sorgen, dass mehrere Optionen ausgewählt werden können. Dies funktioniert natürlich nur mit Scroll-Listen. Außerdem müssen Sie im Falle einer Mehrfachauswahl die STRG-Taste gedrückt halten.
|
Zu diesen Tags gibt es natürlich noch eine Menge weiterer Attribute und Optionen. Diese hier alle zu erwähnen, würde den Rahmen sprengen. Sollten Sie mehr darüber lernen wollen, habe ich Ihnen im Anhang Links und empfehlenswerte Literatur zusammengestellt. Oder noch besser, Sie sehen sich einfach den Quelltext diverser Webseiten an, deren Formulare Ihnen besonders gut gefallen. Aber auch hier gilt: nur inspirieren lassen und nicht klauen.
|
