HTML Teil 7

Zum ... Teil 6 - Teil 8

Im sechsten Teil dieses Tutorials wurden nochmals Cascading Style Sheets (CSS) behandelt. Im Einzelnen ging es um folgende Themen:

• Exakte Positionierung von Elementen
• Überlappung von Elementen
• Unterklassen von Tags

Im heutigen Abschnitt sollen Formulare behandelt werden.

In solchen Formularen kann der Anwender Eingabefelder ausfüllen, z.B. Text eingeben, aus Listen Einträge auswählen und Vieles mehr. Nach dem Ausfüllen des Formulars kann dieses durch einen Mausklick versandt werden.

Häufig werden die Daten des ausgefüllten Formulars per E-Mail dem Webmaster einer Internetseite zugeschickt. Man kann aber auch die Daten von einem CGI-Programm auf dem Server-Rechner weiterverarbeiten lassen. Die letztgenannte Möglichkeit wird hier nicht weiter betrachtet.

Formulare ermöglichen z.B. dem Anwender spezifizierte Daten für einen Suchbegriff auf einer Suchdienstseite anzugeben. Eine andere Anwendung zeigt sich bei Online-Shops, bei denen der Anwender seine Bestellwünsche über Formulare genau angeben kann.

Auf der Internetseite des TC-Hagen finden Sie ein Formular, um sich online anzumelden. Kicken Sie hier , um sich dieses Formular anzusehen. Klicken Sie anschließend im Browser-Fenster auf den Zurück-Pfeil, um zu dieser Seite zurück zu kehren.

Ein HTML-Formular wird durch den Tag <form> eingeleitet. Es muss immer durch einen korrespondierenden </form>-Tag abgeschlossen werden. Zwischen diesen beiden Tags können alle normalen HTML-Befehle verwendet werden und außerdem die speziellen Befehle, um Eingabefelder zu definieren. Innerhalb des <form>-Tags werden die auszuführende Aktion und die Art der Informationsübertragung angegeben. Dies geschieht durch die Parameter action und method.

Als auszuführende Aktion kann im Prinzip eine beliebige Adresse angegeben werden. Diese wird dann aufgerufen, sobald der Anwender den Submit-Button (siehe unten) betätigt. In der Regel macht jedoch nur die Angabe eines CGI-Skripts oder einer Mailadresse Sinn.

Als Methode sind zwei verschiedene Werte möglich: post und get. Dabei ist die Get-Methode der Standardwert, wenn keine Methode angegeben wurde. Bei der Get-Methode werden die Daten an die Adresse des CGI-Skripts angehängt, bei der Post-Methode dagegen werden die Daten in den Formularfeldern als zusätzliches IP-Packet übertragen.

Definition eines Formulars:
<form action="mailto:tennis@tc-hagen.de" method="post">
...
</form>

Verschiedenen Eingabefelder für Formulare:

Ausführungs-Schaltflächen

Ausführungsbuttons sind eigentlich keine richtigen Eingabefelder, stehen aber dennoch am Anfang, da sie eine sehr wichtige Aufgabe erfüllen. Sie ermöglichen es erst, ein Formular zum Server zu schicken. Es gibt zwei verschiedene Ausführungsbuttons: den so genannten Submit-Button und den Reset-Button. Wird der erst genannte betätigt, dann wird das Formular übertragen. Klickt man auf einen Reset-Button, werden alle Eingabefelder auf ihren ursprünglichen Wert zurückgesetzt.

Und so sieht der Quelltext aus:
<form>
<table>
<tr>
<td><input type=submit value="Abschicken"></td>
<td><input type=reset value="Löschen"></td>
</tr>
</table>
</form>

Texteingabefelder

Textfelder werden durch den Tag <input> innerhalb des Formulars definiert. Steht dieser Tag außerhalb eines Formulars wird es ignoriert. Über den Paramter type kann die Art der in diesem Textfeld erlaubten Daten angegeben werden. Mögliche Werte sind:

Wichtiger Hinweis: Manche Webbrowser werten die Angaben (außer Text) nicht richtig aus!

Die Vorbelegung des Textfeldes kann durch den Parameter value bestimmt werden. Standardmäßig sind die Textfelder leer.

Der Name des Textfeldes wird durch den Parameter name festgelegt. Gültig sind beliebige Zeichenketten, allerdings sollte auf Leerzeichen und Sonderzeichen verzichtet werden. Die Länge des Textfeldes in Zeichen wird mit dem Parameter size angegeben. Durch die zusätzliche Angabe von maxlength kann die Eingabe beschränkt werden. Wird auf diesen Paramter verzichtet, können unendlich viele Zeichen eingegeben werden.

Beispiel für ein Formular:

Und dies ist der Quelltext:

<form action="mailto:tennis@tchagen.de" method=post enctype="text/plain">
<table width=100%>
<tr><td align=right>Vor- und Zuname:</td><td><input type=text size=40 name="Name"></td></tr>
<tr><td align=right>Straße und Hausnr.:</td><td><input type=text size=40 name="Strasse"></td></tr>
<tr><td align=right>Plz. und Ort:</td><td><input type=text size=40 name="Ort" value="Kiel"></td></tr>
<tr><td align=right>Telefon (für eventuelle Rückfragen):</td><td><input type=text size=20 name="Telefon"></td></tr>
<tr><td align=right>E-Mail:</td><td><input type=text size=40 name="Email"></td></tr>
</table>
</form>

Beachten Sie, dass die Formularfelder in eine Tabelle eingebettet sind. Außderdem wird mit der Angabe enctype="text/plain" erreicht, dass beim Versand von Formularen als E-Mails diese "anständig" formatiert werden.

Mehrzeilige Eingabefelder

Mehrzeilige Eingabefelder dienen dazu, längere Texte (z.B. Kommentare) aufzunehmen. Sie werden von dem Tag <textarea> eingeleitet. In den Parametern cols (Columns=Spalten) und rows (=Reihen) können sie die Breite und Höhe des Eingabefeldes in Zeichen angeben. Abgeschlossen wird das Textfeld durch den Tag </textarea>. Alles was sich zwischen den beiden Tags befindet wird als Vorbelegung für das Textfeld interpretiert. Es ist also wichtig, dass sie den abschließenden Tag nicht vergessen. Sonst wird der Rest ihres HTML-Codes in das Textfeld eingefügt und nicht als Seite interpretiert.

Zusätzlich können sie auch noch durch die Angabe von wrap den Zeilenumbruch im Textfeld steuern. Sie können hier die Werte virtual, physical und off angeben. Virtual ermöglicht den automatischen Umbruch, es werden jedoch keine Zeilenumbruchszeichen übertragen. Physical erzeugt praktisch ein identisches Verhalten wie virtual, jedoch werden die Umbruchszeichen mit übertragen. Durch die Angabe off wird der automatische Zeilenumbruch abgeschaltet. Dies ist gleichzeitig die Voreinstellung.

Beispiel:

Es folgt der Quelltext:
<form action="mailto:tennis@tchagen.de" method=post enctype="text/plain">
<table width=100%>
<tr><td align=right>Ihr Kommentar:</td><td><textarea cols=50 rows=10 name="Kommentar">Hier können Sie Ihren Kommentar in beliebiger Länge eintragen.</textarea></td></tr>
</table>
</form>

Auswahllisten

In Auswahllisten können sie dem Anwender eine feste Liste von Einträgen anbieten, aus der er einen oder mehrere auswählen kann. Eine Auswahlliste wird immer von dem Tag <select> eingeleitet und mit dem Tag </select> abgeschlossen. Zwischen diesen Tags befinden sich die Einträge, die jeweils mit <option> ... </option>eingeschlossen werden. Ein schon bei der Anzeige der Liste selektierter Eintrag wird durch <option selected> bestimmt.

Die Anzahl der angezeigten Listenelemente kann durch den Parameter size im Tag <select> bestimmt werden. Soll Mehrfachauswahl zugelassen werden, dann muss zusätzlich noch multiple angegeben werden.

Beispiel:

Und dies ist der Quelltext:
<form action="mailto:tennis@tchagen.de" method=post enctype="text/plain">
<table width=100%>
<tr><td align=right>Wählen Sie Ihre Lieblingsängerin:</td>
<td><select name="Liebling" size=5>
<option>Sophie Zelmani</option>
<option selected>Sinead Lohan</option>
<option>Tracy Chapman</option>
<option>Jann Arden</option>
<option>Aimee Mann</option>
</select>
</td></tr>
</table>
</form>

Check- und Radiobuttons

Radiobuttons sind eine Gruppe von beschrifteten Buttons, aus denen der Anwender immer nur einen markieren kann. Im Gegensatz dazu können aus einer Gruppe von Checkbuttons immer mehrere (oder auch keiner) markiert sein.

Check- und Radiobuttons bilden immer Gruppen, die durch den gleichen Namen der verschiedenen Felder gekennzeichnet sind. In diesen Gruppen gelten dann die oben genannten Bedingungen. Von der Notation her gleichen die Radio- und Checkbuttons den einzeiligen Textfeldern, als Typ wird hier allerdings checkbox oder radio angegeben. Der Parameter value bestimmt in diesem Fall nicht die Voreinstellung, sondern den internen Wert des Buttons. Wenn der Anwender das Formular abschickt, wird dieser Wert übertragen.

Beispiel für Radiobuttons:

Quelltext:
<form action="mailto:tennis@tchagen.de" method=post enctype="text/plain">
<p>Geben Sie Ihr Geschlecht an:</p>
<p>
<input type="radio" name="Geschlecht" value="male">männlich<br>
<input type="radio" name="Geschlecht" value="female">weiblich
</p>
</form>

Beispiel für Checkbuttons:

Quelltext:
<form action="mailto:tennis@tchagen.de" method=post enctype="text/plain">
<p>Welche Betriebssysteme verwenden Sie in Ihrer Firma:</p>
<p>
<input type="checkbox" name="System" value="sys1">Windows9x<br>
<input type="checkbox" name="System" value="sys2">Windows2000<br>
<input type="checkbox" name="System" value="sys3">WindowsXP<br>
<input type="checkbox" name="System" value="sys4">Linux<br>
<input type="checkbox" name="System" value="sys5">Andere<br>
</form>

Vervollständigen Sie die Indonesienseite um ein Formular, das Sie in folgender Vorschaudatei betrachten können. Achtung, es wird ein neues Fenster geöffnet!

Beachten Sie, dass die Eingabefelder mit Hilfe von CSS gestaltet wurden. Folgende Formatklasse wurde im Kopf der Datei deklariert:
<style type="text/css">
<!--
.feld {border-width:2px; border-style:solid; border-color:#0000FF; font-weight:bold; color:#A00020; background-color:FFF000 }
-->
</style>

Mit border-width wird die Breite des Rahmens und mit border-style die Rahmenart festgelegt. Die Rahmenfarbe definieren Sie mit border-color und die Hintergrundfarbe mit background-color. Color legt die Schriftfarbe fest. Die Eingabefelder des Formulars werden z.B. in folgender Weise mit der CSS-Klasse verbunden:
<input name"Hauptstadt" type="text" size="15" class="feld">

Die blinkenden Schaltflächen am Ende des Formulars kommen dadurch zustande, dass sie mit einer zweifarbigen animierten Gif-Grafik versehen wurden:
<input type="submit" style="background-image:url('grafik/blink.gif')" value="Abschicken">

Und so sieht die E-Mail aus, die nach dem Ausfüllen des Formulars über den Microsoft Internet-Explorer mit Outlook-Express verschickt wurde:

Zum ... Teil 6 - Teil 8