Formulare

Formulare sind so eine Sache: Der Seitenbetreiber möchte gerne möglichst viel über seine Besucher wissen. Der Besucher möchte - so gut es geht - anonym bleiben bzw. ist viel zu faul, um ein detailliertes Formular auszufüllen. Besonders im E-Commerce-Bereich ist aber die Abfrage von Kundendaten unverzichtbar. Bei dem Kauf von Waren wird jeder Besucher einsehen, daß er einige Angaben machen muß. Das Ausfüllen und Abschicken von Formularen kann man dem Besucher durch eine optisch ansprechende und gut gegliederte Gestaltung erleichtern. Dazu gehört eine perfekte Positionierung der Formularelemente ebenso wie die Aufteilung der Formularelemente in thematisch verwandte Gruppen. So kann man die Übersichtlichkeit enorm steigern.

Ein Formular wird vom <form></form> - Tag umgeben. Das <form> - Tag kann verschiedene Attribute haben:

Die Formulareingaben geschehen über die verschiedenen Formularelemente, die innerhalb der <form> - Tags stehen müssen.

Einzeilige Eingabefelder

Ihr Verwendungszweck ist die Eingabe von Benutzerdaten. Der User kann hier z. B. seinen Namen, Adresse, Tel.-Nr. usw. eingeben. Textfelder haben die Attribute "size" und "maxlength". "Size" bedeutet die sichtbare Länge des Textfeldes, "maxlength" die maximale Breite. Wenn "maxlength" größer als "size" ist, kann die Länge der eingegebenen Zeichen die sichtbare Länge des Texfeldes übersteigen, d, h. es muß bei langen Eingaben gescrollt werden.

Mehrzeilige Eingabefelder

Diese Felder dienen dazu, dem Besucher die Eingabe eines längeren Textes oder Kommentars zu ermöglichen. Bei den mehrzeiligen Eingabefeldern ist es notwendig, einen Namen zu vergeben. Dieser darf keine Leerzeichen, keine Umlaute und keine Sonderzeichen enthalten. "cols" und "rows" bestimmt die Anzahl der angezeigten Zeichen pro Zeile bzw. die Zeilenanzahl. Bei den mehrzeiligen Eingabefeldern unterliegt der Text keiner Beschränkung der Zeichenzahl.

Beispiel:

<font face="Verdana, Arial, Helvetica, sans-serif" size="2">Sagen Sie uns Ihre Meinung: Was halten Sie vom B&auml;umepflanzen?</font>
<form name="form1" method="post" action="mailto:beispiel@gmx.de">
<textarea name="baeumepflanz" cols="85" rows="5"></textarea>
<br>
<br>
</form>

Auswahllisten

Mit <select..> wird die Auswahlliste eingeleitet, den Abschluß bildet </select>. Mit <option> wird der Listeneintrag eingeleitet. Es ist ausnahmsweise kein Schlußtag notwendig, kann aber angegeben werden. Achtung: die Auswahlliste muss einen Namen haben!

Es können mehrere Elemente gleichzeitig ausgewählt werden (STRG - Taste gedrückt halten), allerdings sollte man den Besucher darauf hinweisen, daß das geht. Dazu fügt man ins <select>-Tag das Attribut "multiple" ein. Es gibt noch ein weiteres Attribut für das <select>-Tag: "size" legt die Anzahl der angezeigten Werte fest.

Es kann ein Eintrag vorausgewählt werden. Dazu wird ins zugehörige <option>-Tag das Attribut "selected" eingefügt.

Listeneinträge können mit internen Entsprechungen versehen werden. Dann wird nicht der ausgewählte Eintrag mit dem Formular abgeschickt, sondern die Entsprechung. Dazu setzt man im <option>-Tag das Attribut "value" ein und gibt "value" den gewünschten Wert (Beispiel: value="bestellnummer101").

Radiobuttons

Radiobuttons bilden immer eine Gruppe von Buttons, aus denen einer ausgewählt werden kann. Sobald ein zweiter Button angeklickt wird, verschwindet die erste Markierung wieder. Es kann also immer nur ein Button markiert sein. Der Wert (Attribut value) wird beim Versenden des Formulars mitgeschickt.

Radiobuttons werden durch das Tag <input> (input=Eingabe) mit der Typangabe "radio" definiert. Jeder Radiobutton muß einen Namen haben und zwar alle Radiobuttons der gleichen Gruppe denselben. Der Name darf keine Leer- und Sonderzeichen enthalten und muss in Anführungszeichen stehen. Mit value spezifiziert man den Wert und auch dieser muß in Anführungszeichen stehen! Hinter dem <input> Tag wird als Text der Wert angegeben, mit dem der Button im Formular erscheinen soll.

Checkboxen

Checkboxen sind eine Gruppe von beschrifteten Buttons, aus der der Besucher einen oder mehrere markieren kann. Ein markierter Button hat ein Häkchen im Kasten. Die Werte von markierten Checkboxen werden beim Absenden des Formular mit übertragen. Auch Checkboxen beginnen mit dem <input> - Tag, haben dann aber als Typangabe die Bezeichnung "checkbox". Sie müssen einen Gruppennamen haben, genauso wie die Radiobuttons. Für die Vergabe von Namen und Werten gilt das unter Radiobuttons Gesagte.

Buttons zum Absenden oder Abbrechen

Diese Buttons dienen zum Absenden des Formulars bzw. zum Löschen schon getätigter Eingaben. Mit <input type=submit ...> definieren Sie einen Absende-Button (submit = bestätigen). Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt. Es wird damit so verfahren, wie im Attribut action im <form> - Tag angegeben wurde (s. u.). Mit <input type=reset...> wird ein Abbrechen-Button definiert (reset = zurücksetzen). Eingegebene Daten werden verworfen und nicht abgeschickt. Mit dem Attribut value=... wird die Beschriftung der Buttons bestimmt. Die Angabe muß in Anführungszeichen stehen.

So sieht es dann im Quelltext aus:

Radiobuttons:

Geben Sie Ihren Familienstand an:
<br><br>
<input type=radio name="Familienstand" value="ledig"> ledig
<br>
<input type=radio name="Familienstand" value="verheiratet"> verheiratet
<br>
<input type=radio name="Familienstand" value="geschieden"> geschieden

Checkboxen:

<p>Geben Sie bei der Zimmerbestellung die gew&uuml;nschten Extras an:</p>
<input type=checkbox name="zutat" value="Balkon"> Balkon<br>
<input type=checkbox name="zutat" value="Meerblick"> Meerblick<br>
<input type=checkbox name="zutat" value="Wannenbad"> Wannenbad

Buttons zum Absenden oder Abbrechen

<input type=submit value="Formular Absenden">
<input type=reset value="Eingabe löschen">

Formulare verarbeiten

Ein Formular kann auf zweierlei Weise verarbeitet werden. Es kann entweder per E-mail versendet oder es kann von einem CGI-Script verarbeitet werden. Im Falle der Versendung per E-mail wird als action "mailto:E-mail-Empfängeradresse" angegeben. Auch wenn es nicht immer funktioniert, z. B. bei älteren Browsern, sollte man auf jeden Falle enctype="text/plain" angeben. Das verhindert, das der Empfänger den Formularinhalt in codierter Form zu sehen bekommt. Codierte Formulareingaben sehen in etwa so aus:

Danke+f%FCr+den+Tee%21 (soll heißen: Danke für den Tee)

Wenn das Formular an ein CGI-Script übergeben werden soll, muß in action der Pfad zu dem CGI-Script angegeben werden. Im allgemeinen ist die Angabe /cgi-bin/Dateiname üblich. Allerdings kann der Pfad auch anders lauten. Im Zweifel sollte man den Server-Administrator fragen bzw. den Provider.

In method gibt man an, auf welche Weise das Formular versendet werden soll. Wenn ein HTML-Formular die GET-Methode verwendet, wird der Formulardatenstrom, getrennt durch ein Fragezeichen, direkt hinter die URL-Adresse des CGI-Programmaufrufs gehängt. Im WWW-Browser des Anwenders ist dies nach dem Absenden des Formulars in der URL-Zeile sichtbar. Die Methode "POST" ist daher sowohl optisch als auch sicherheitstechnisch die bessere Wahl, insbesondere bei Versendung per E-Mail. Falls das Formular mit einem CGI-Script verarbeitet werden soll, ist der Einsatz von GET oder POST von der Art der Programmierung abhängig (s. Dokumentation des Programmierers).

Zur tabellarischen Übersicht

Sie haben jetzt die wichtigsten Themengebiete in HTML kennengelernt. Natürlich gibt es noch viel mehr Spezialitäten und Feinheiten. Falls Sie mehr wissen wollen, empfehle ich einen Blick in Selfhtml von Stefan Münz.

Wenn Sie Fragen zur Webseitengestaltung mit HTML haben, senden Sie mir eine Mail. Vielleicht kann ich Ihnen weiterhelfen.