Sehr Umfangreiche Webseite zum Programmieren in C Perl CGI, Skripting, Linux, SystemprogrammierungHTML Formulare Tag tags form, input, select, textarea, option, SelfHTML HTML Formulare - Die Tags | form, input, select, textarea, option, SelfHTML GGI Kurs Kapitel 6

HTML-Formulare - Die Tags          zurück zum Inhaltsverzeichnis

In diesem lernen Sie einige HTML-Tags kennen, womit Sie sogenannte Web-Formulare erstellen können. Natürlich handelt es sich dabei nur um einen kurzen Überblick dazu. Sollten Sie mehr Wissen zu den HTML-Tags von Web-Formularen oder HTML im allgemeinen benötigen, kann ich Ihnen die Webseite SelfHTML von Stefan Münz oder die von mir Empfohlenen Büchern empfehlen.

<form> - Tag

Diesen Tag werden Sie bei jedem Formular verwenden. Alle Formulare stehen zwischen den Tag <form> und </form> ...

<form>
...
Formularinhalt
...
</form>

Folgende zwei Attribute des <font> - Tags sind für uns von besonderem Interesse ...

Somit könnte der <font> - Tag folgendermaßen aussehen ...

<font action="./cgi-bin/auswert.cgi" method="POST">
...
Formularinhalt
...
</form>

<input> - Tag

Mit dem <input> - Tag können wir ein Menge Formularobjekte erzeugen. Unterschieden werden diese durch das Type-Attribut. Besonders wichtig für CGI-Skripte ist außerdem das Attribut name. Damit können wir beim auswerten eines Formulares auf den übergeben Wert zugreifen. Perl-kundige können sich das wie einen Hash vorstellen, dem Schlüssel/Wert-Paar. Nun aber zu den einzelnen Typen des <input-Tag.

<input type="text">

So siehts aus:



So wird es gemacht :

<input type=text name="name" size=32 maxlength=32 value="dein name">

Die folgenden Attribute wurden hierbei für das Textfeld verwendet ...

<input type="password">

So siehts aus:



So wird es gemacht in HTML:

<input type=password value="abcdefg" size=16, maxlength=16>

Als Attribute werden dabei dieselben wie schon beim Textfeld (type=text) verwendet. Dieses Eingabefeld dient allerdings nur als Bildschirmschutz, den bei der GET-Methode wird das Passwort unverschlüsselt im Query-String angezeigt.

<input type="radio">

So siehts aus :

Pizza
Pommes
Salat

So wird es gemacht in HTML:

<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>

Folgende Attribute werden bei Radiobuttons besonders benötigt ...

<input type="checkbox">

So siehts aus:

Nachnahme (+6 Euro)
Express   (+2 Euro)
Versichert(+2 Euro)

So wird es gemacht in HTML:

<input type="checkbox" name="zusatz" value="10000">Nachnahme (+6 Euro)<br>
<input type="checkbox" name="zusatz" value="20000">Express &nbsp;&nbsp;(+2 Euro)<br>
<input type="checkbox" name="zusatz" value="30000">Versichert(+2 Euro)<br>

Die Checkbuttons können ebenso verwendet werden, wie schon die Radiobuttons. Mit dem Unterschied, dass mit Checkbuttons eine Mehrfachauswahl möglich ist im Gegensatz zu den Radiobuttons. Natürlich kann man hier das Attribut checked ebenfalls mehrmals verwenden.

<input type="submit"> und <input type="reset">

So siehts aus:



So wird es gemacht in HTML:

<input type="Submit" name="sub" value="Abschicken"><input value="Zurücksetzen" type="reset">

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 angegegeben haben. Das Attribut name macht beim Submit-Button eigentlich nur dann einen 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 siehts aus:



So wird es gemacht in HTML:

<textarea name="textform" cols="32" rows="6">Textinhalt</textarea>

Damit haben wir 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 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 ist, bestimmen Sie mit dem Attribut size. Geben Sie für dieses Attribut den Wert 1 ein, erstellen Sie ein Aufklappmenü. Geben Sie diesem Attribut beispielsweise den Wert 5, so haben Sie eine Scrollliste, wo 5 Elemente der Liste sichtbar sind. Aber dazu am besten wieder ein Beispiel. Fangen wir mit der Scrollliste an.

So siehts aus:

Seite bewerten:

Und so wird es gemacht in HTML:

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>

Mit Hilfe des <option> - Tag können Sie die möglichen Werte 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 bereits ausgewählt anzeigen. Nun zur Scroll-Liste.

So siehts aus:

Seite bewerten:

So wird es gemacht in HTML:

Seite bewerten:
<select name="Bewertung" size="3">
<option>Note 1</option>
<option>Note 2</option>
<option selected>Note 3</option>
<option>Note 4</option>
<option>Note 5</option>
<option>Note 6</option>
</select>

Zusätzlich können Sie mit dem Attribut multiple beim <select> - Tag dafür sorgen, das mehrere Optionen ausgewählt werden können. Dies funktioniert natürlich nur mit Scroll-Listen.

Zu all diesen Tags gibt es natürlich noch eine Menge mehr Attribute und Optionen. Alle diese hier zu erwähnen, würde den Rahmen sprengen und das ist auch nicht mein Ziel. Sollten Sie mehr darüber lernen wollen, habe ich Ihnen einige Bücher bei Empfehlenswerte Literatur zusammengestellt. Oder noch besser, schauen Sie sich einfach den Quelltext diverser Webseiten an, deren Formulare Ihnen besonders gut gefallen.