HTML-Formulare

Willemers Informatik-Ecke

Zur Erstellung von Eingabemasken und Kontrollelementen wird in HTML ein Formular (form) erstellt. Der Inhalt des Formulars wird entweder auf dem Server selbst verarbeitet oder kann per E-Mail versandt werden.

Während der Versand per E-Mail eigentlich immer möglich ist, erlauben die meisten Provider aus Sicherheitsgründen keine CGI-Programme auf ihren Servern.

Formular-Rahmen

Jedes Formular wird unsichtbar eingerahmt. Im Kopf wird dabei Aktion und Versendungsmethode festgelegt.

<form action="mailto:arnold@willemer.de" method=post enctype="text/plain">
...
</form>

Dies ist ein typisches Beispiel für das Versenden des Formularinhaltes per E-Mail. Das mailto kann auch durch einen Betreff ergänzt werden. Dann lautet die action-Anweisung: action="mailto:arnold@willemer.de?subject=Form 1". Der Browser wird versuchen, den Formularinhalt an die genannte E-Mail Adresse zu senden. Beispielsweise kann dies der Netscape selbstständig tun. Der Internet Explorer kann aber selbst keine E-Mail versenden und verwendet dazu das Standard E-Mailprogramm und dort liegt dann der Inhalt des Formulars bis das nächste Mal eine Mail versandt wird.

<form action="../cgi-bin/tuwas" method=get>
...
</form>

Der Inhalt dieses Formular wird von dem CGI-Programm tuwas verarbeitet. Dieses muss sich auf dem Server befinden. Der Provider muss dazu dem Webseitenbesitzer gestatten, auf seinem Server Programme ausführen zu lassen. Da dies Sicherheitsrisiken birgt, sind die meisten Provider nicht dazu bereit.

Die Bedeutung der angegebenen Parameter sind:

action=: Hier wird der Name des CGI-Programmes auf dem Server angegeben, das das Formularergebnis bearbeitet. Ausnahme ist die Anweisung mailto, die den Inhalt an eine Adresse versenden läßt. In diesem Fall sollte die Methode POST verwendet werden.
method=get: die Daten werden in der Environmentvariable QUERY_STRING abgelegt. Das CGI-Programm liest diese Variable aus.
method=post: die Daten werden per Standardeingabe an das CGI-Programm geliefert. Die Environmentvariable CONTENT_LENGTH enthält die Länge der Eingabe.
enctype="text/plain": Wandelt die Daten in leichter lesbare Form um, sofern der Browser dies unterstützt.

Eingabe- und Kontrollelemente

Ein Formular wird erst durch die Bestückung mit Kontrollelementen lebendig. Die Elemente gehören zum Formular, wenn sie zwischen <form> und </form> stehen.

Einige Parametervariablen haben die Elemente gemeinsam:

type=: der Typ des Eingabeelements
name=: der Variablenname unter dem die Eingabe angesprochen werden kann.
value=: die Vorbelegung des Eingabeelements

Formularaktionen: submit und reset

Jedes Formular enthält normalerweise einen Button zum Absenden des Formularinhalts an das CGI-Programm oder die E-Mail. Dieser Button ist vom Typ submit. Erst wenn der Betrachter auf diesen Knopf geht, wird die action des Forms aktiv.

Der Reset-Knopf bewirkt ein Zurücksetzen des Formularinhalts auf den Ursprungszustand.

<input type=submit value="OK">
<input type=reset value="vergiß es">

Texteingabefeld: type=text

<input type=text name="auto" value="Alt aber bezahlt" size=20 maxlength=60>

type=text ist der Default und kann weggelassen werden. Bei type=password wird die Eingabe unlesbar gemacht.

Radio Buttons und Checkboxes

Der Unterschied zwischen beiden ist am leichtesten am Beispiel zu zeigen.

Radio Buttons

Während die linke Seite die Modellierung der Realität ist, entspricht die rechte Seite eher dem Wunschdenken.

Die Radio-Buttons im Quellcode:

<br><input type=radio name="eigenschaft" value="schoen" checked> schön
<br><input type=radio name="eigenschaft" value="sportlich"> sportlich
<br><input type=radio name="eigenschaft" value="intelligent"> intelligent

Der gleiche Name fast die Gruppe zusammen, in der nur eine Markierung zugelassen ist. checked belegt den Eintrag als markiert.

Die Checkboxes unterscheiden sich eigentlich nur im Typ und in der Möglichkeit, mehrere checked-Felder anzugeben.

<br><input type=checkbox name="eigenschaft" value="schoen" checked> schön
<br><input type=checkbox name="eigenschaft" value="sportlich" checked> sportlich
<br><input type=checkbox name="eigenschaft" value="intelligent" checked> intelligent

Listbox und Drop-Down-Liste (select)

Eine Listbox wird aus einem <select>-, </select>-Paar aufgebaut, zwischen denen mit <option> mehrere Einträge aufgeführt werden.

<select name="Essen" size=1>
<option value="W1">Pizza
...
<option value="W5" selected>Kartoffelbrei
...
<option value="W9">Wurst
</select>

Der Unterschied zwischen der Drop-Down-Liste und der Listbox besteht im Parameter size. Ist er 1, gibt es eine Drop-Down-Liste.

Dateiselektion

In den neueren Browsern ist eine Möglichkeit gegeben, Dateien auszuwählen. Beispielsweise wird dies verwendet, um den Upload von Dateien auf Server zu realisieren.

<input type=file size=50 maxlength=255 name="Datei" accept="text/*">

Buttons: Aktionen mit JavaScript

Normale Buttons haben einen Aktions-Charakter. Damit die HTML-Seite aber aktiv werden kann, braucht sie JavaScript oder Vergleichbares.

Der Button bewirkt das Gleiche wie der Back-Button des Browsers.

<input type=button value="Letzte Seite" onClick="history.back()">

Homepage