SELFHTML/Quickbar  HTML  Formulare


Formulare definieren

Diese Seite ist ein Dokument mit Informationstext

 Allgemeines zu Formularen
 Formular definieren
 Zielfenster für Server-Antwort bei Frames
 Weitere Möglichkeiten

 

Allgemeines zu Formularen

HTML stellt die Möglichkeit zur Verfügung, mit Hilfe spezieller Befehle Formulare zu erstellen. In Formularen kann der Anwender Eingabefelder ausfüllen, in mehrzeiligen Textfeldern Text eingeben, aus Listen Einträge auswählen und Buttons anklicken. Wenn das Formular fertig ausgefüllt ist, kann der Anwender auf einen Button klicken, um das Formular abzusenden.

Dazu geben Sie beim Erstellen eines Formulars an, was mit den Daten des ausgefüllten Formulars passieren soll. Sie können sich die ausgefüllten Daten beispielsweise per E-Mail zuschicken lassen oder von einem CGI-Programm auf dem Server-Rechner weiterverarbeiten lassen.

Formulare können sehr unterschiedliche Aufgaben haben. So werden sie zum Beispiel eingesetzt:

Ein Software-Hersteller könnte z.B. ein Formular zur Verfügung stellen, in dem der Anwender angeben kann, welche Produkte der Firma er besitzt, wie er Kenntnis von den Produkten erhalten hat, welchen Beruf er ausübt, auf welchem Rechnertyp die Software bei ihm läuft usw. Auf diese Weise könnte er gleichartig strukturiertes und daher gut vergleichbares Feedback von Anwendern einholen.

Viele Suchdienste im Internet bieten dem aufrufenden WWW-Browser in HTML geschriebene Eingabe-Formulare an, in denen der Anwender seinen Suchwunsch spezifizieren kann. Ohne solche Formulare wäre das Durchsuchen gar nicht möglich. Die meisten Suchdienste bieten darüber hinaus auch die Möglichkeit an, eigene Internet-Adressen in die Datenbank einzuspeisen. Das Einholen der dazu nötigen Information geschieht ebenfalls mit Hilfe von Formularen.

Immer zahlreicher werden auch die Bestell-Services im Internet. Egal ob Tickets, Pizza oder Unterwäsche - um solche Bestell-Services zu realisieren, sind Formulare erforderlich, in denen der Anwender seine Bestellwünsche genau angeben kann.

Wenn Sie dem Anwender auf Ihren WWW-Seiten einfach nur eine Möglichkeit anbieten wollen, direkt mit Ihnen in Kontakt zu treten, genügt allerdings auch ein einfacher  E-Mail-Verweis an die eigene Email-Adresse.

 

HTML2.0 Formular definieren

Beispiel Anzeigebeispiel: So sieht's aus

Sie können an einer beliebigen Stelle innerhalb des Dateikörpers einer HTML-Datei ein Formular definieren.

Beispiel 1:

<form action="mailto:muenz@csi.com" method=post enctype="text/plain">
... Elemente des Formulars wie Eingabefelder, Auswahllisten, Buttons usw. ...
</form>

Beispiel 2:

<form action="/cgi-bin/auswert.pl" method=get>
... Elemente des Formulars wie Eingabefelder, Auswahllisten, Buttons usw. ...
</form>

Erläuterung:

Mit <form ...> definieren Sie ein Formular (form = Formular). Alles, was zwischen diesem einleitenden Tag und dem abschließenden Tag </form> steht, gehört zum Formular. Das sind hauptsächlich Elemente des Formulars wie Eingabefelder, Auswahllisten oder Buttons. Um die Elemente zu plazieren, brauchen Sie jedoch auch  Textabsätze (Absatzschaltungen) und  erzwungene Zeilenumbrüche. Darüber hinaus können Sie zwischen <form...> und </form> auch Text eingeben und diesen Text wie üblich mit HTML-Befehlen formatieren. Auch Grafiken, Verweise, Tabellen, Multimedia-Elemente sind mitten im Formular erlaubt. So können Sie Ihr Formular optisch aufwerten und mit erklärendem Text usw. versehen.

Im einleitenden <form>-Tag geben Sie mit action= an, was mit den ausgefüllten Formulardaten passieren soll, wenn der Anwender das Formular abschickt (action = Aktion). Die Angabe sollte in Anführungszeichen stehen.

Die Angabe bei action= ist entweder eine E-Mail-Adresse (normalerweise Ihre eigene) mit vorangestelltem mailto: - so wie im ersten der obigen Beispiele (mailto = sende an). Dann werden die ausgefüllten Formulardaten an diese E-Mail-Adresse geschickt.
Oder Sie rufen ein Programm auf dem Server-Rechner, meistens ein CGI-Programm, auf, das die Daten weiterverarbeitet - so wie im zweiten der obigen Beispiele. Bei der Adressierung des CGI-Programms gelten die gleichen Regeln wie bei  Verweisen.
Weitere Hinweise hierzu in den Abschnitten  Formulare als E-Mail und  Formulare und CGI.
Allgemeines zum Thema CGI finden Sie außerdem im Abschnitt  CGI - Common Gateway Interface. Und schließlich enthält dieses Dokument eine einführende  CGI/Perl-Dokumentation.

Bei der Formulardefinition müssen Sie als nächstes die Übertragungsmethode angeben. Dabei gibt es zwei Möglichkeiten:

Wenn Sie sich Formulardaten per E-Mail zuschicken lassen, benutzen Sie immer method=post. Außerdem sollten Sie bei E-Mail-Empfang von Formulardaten immer die Angabe enctype="text/plain" mit angeben. Denn Formulardaten sind normalerweise nach einem bestimmten Schema formatiert, das für auswertende Programme recht gut geeignet ist, aber für Menschen keine Freude zu lesen ist. Mit der genannten Angabe erhalten Sie zumindest von Anwendern, die Ihr Formular mit einem modernen WWW-Browser ausfüllen, ordentlich formatierte E-Mails.

Beachten Sie:

Nicht alle Browser beherrschen das Versenden von Formularen per E-Mail (mehr dazu siehe  Formulare auswerten).

 

HTML4.0 Zielfenster für Server-Antwort bei Frames

Beispiel Anzeigebeispiel: So sieht's aus

Wenn Sie mit  Frames arbeiten und in einem Frame-Fenster ein Formular haben, nach dessen Absenden die Server-Antwort (zum Beispiel die Ausgabe eines CGI-Scripts) in einem anderen Frame-Fenster angezeigt werden soll, können Sie das Zielfenster für die Server-Antwort angeben.

Beispiel:

<form action="/cgi-bin/auswert.pl" method=post target="Daten">
... Elemente des Formulars wie Eingabefelder, Auswahllisten, Buttons usw. ...
</form>

Erläuterung:

Mit dem Attribut target= können Sie im einleitenden <form>-Tag den Namen des Frame-Fensters angeben, in dem die Server-Antwort ausgegeben werden soll. Sowohl Netscape als auch der MS Internet Explorer interpretieren diese Angabe.

 

HTML4.0 Weitere Möglichkeiten

Mit Hilfe von  JavaScript können Sie Eingaben in Formularen steuern und kontrollieren. Bereits im einleitenden <form>-Tag ist der JavaScript- Event-Handler onSubmit= erlaubt. Beachten Sie dabei auch das JavaScript-Anwendungsbeispiel  Formulareingaben überprüfen, bevor das Formular abgesendet wird.

Das <form>-Tag kann  Universalattribute enthalten.

Wenn Sie HTML bereits etwas besser kennen, probieren Sie auch mal die Möglichkeiten aus, die Ihnen  CSS Style-Sheets bieten. Damit können Sie Formulare zusätzlich formatieren. Zunächst müssen Sie dazu wissen, wie man  Style-Sheets definieren kann. Anschließend sind Sie in der Lage, Style-Sheet-Angaben anzuwenden. Interessant sind im hier beschriebenen Zusammenhang beispielsweise folgende Style-Sheet-Angaben:
 Abstände, Ränder, Ausrichtung
 Rahmen und Innenabstände
 Hintergrundfarben und -bilder


 
weiter: Einzeilige Eingabefelder
zurück: Browser-interne Grafik-Ressourcen
 

SELFHTML/Quickbar  HTML  Formulare

© 1998  Stefan Münz, muenz@csi.com