23.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.
23.10.1 Die Tags und ihre Bedeutung
Jetzt lernen Sie einige HTML-Tags kennen, mit denen Sie sogenannte Webformulare erstellen können.
| Hinweis |
|
Der Inhalt von HTML-Dateien ist in sogenannten Tags eingeschlossen. Ein Tag besteht zum einen aus dem HTML-Befehl selbst und zum anderen aus einer Kennzeichnung, die besagt, 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 sehen Sie 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
Dieses 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 das <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.
Wir betrachten im Folgenden die einzelnen Typen des <input>-Tags.
<input type="text">
So sieht es aus:
Abbildung 23.12 Einzeiliges Eingabefeld
So wird es gemacht:
<input type=text name="name" size=32
maxlength=32 value="dein name">| Bedeutung der Attribute | |
size |
Gibt die Breite des Textfeldes an. |
maxlength |
die Anzahl der Zeichen, die eingegeben werden können |
value |
Der Wert, der standardmäßig im Text erscheint. Wird dieses Attribut nicht verwendet, bleibt das Textfeld leer. |
<input type="password">
So sieht es aus:
Abbildung 23.13 Einzeiliges Passwortfeld
So wird es gemacht:
<input type=password value="abcdefg" size=16, maxlength=16>
| 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:
Abbildung 23.14 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>
| 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:
Abbildung 23.15 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>
| 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:
Abbildung 23.16 Schaltflächen (Buttons)
So wird es gemacht:
<input type="Submit" name="sub" value="Abschicken"> <input value="Zurücksetzen" type="reset">
| Bedeutung der Attribute |
|
Mit dem Button vom Typ Submit wird das Formular abgeschickt. Es wird also eine Anfrage an die URL gerichtet, die 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:
Abbildung 23.17 Mehrzeiliges Textfeld
So wird es gemacht:
<textarea name="textform" cols="32" rows="6">Textinhalt </textarea>
| 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 umbrochen 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 Scrollliste mit fünf sichtbaren Elementen. Als Beispiel:
size=1
So sieht es aus:
Abbildung 23.18 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>| Bedeutung der Attribute |
|
Mithilfe des <option>-Tags können Sie die möglichen Werte im Klartext schreiben, da das 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:
Abbildung 23.19 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>| 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 Scrolllisten. 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.
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.
