Tripod-HTML-Kurs (1)
Tripod-HTML-Kurs (2): Einführung
- <BODY>-Tag
- <IMG>-Tag
- Imagemaps
- Farbmodelle
- Bildformate
- <META>-Tag
- farbige Tabellen
- Style Sheets
- Formulare
- Test
Tripod-HTML-Kurs (2): Formulare
Mit Hilfe von Formularen können Sie ihren Seiten ein interaktives Element
hinzufügen. Sie können Besuchern Ihrer Seite anbieten ein Formular
auszufüllen. In diesem Formular können z.B. Angaben über monatlichen
Einkünfte und Risikobereitschaft bezüglich finanzieller Anlagen gemacht
werden, die Formulardaten werden dann z.B. per e-mail an Sie geschickt.
Ein Programm wertet diese Angaben aus und gibt als Resultat Hinweise aus, wie man
sich versichern kann oder welche Aktienfonds empfohlen werden können.
Diese Resultate werden dem Besucher zurückgeschickt.
Klickt der Besucher den "Sende"-Knopf, werden die Daten vom Browser kodiert, d.h
sie werden zu einem einzigen String zusammengefaßt. Dieser kodierte String
wird mittels der POST oder der GET-Methode an den Server geschickt.
Die Formulardaten, die einem Web-Server zugeschickt wurden, können von diesem
nicht verarbeitet werden. Der Server übergibt die Daten an ein Programm.
Die Übergabe geschieht mit Hilfe eines Interfaces, des sogenannten CGI, dem
Common Gateway Interface. Mit diesem Interface sind Standards gesetzt, wie Daten
von einem Server an Programme und umgekehrt (also von dem Programm an den Server)
übergeben werden. Die Programme, die die Daten verarbeiten, werden i.a.
CGI-Skripte oder CGI-Programme genannt.
In dieser Übersicht wird nicht auf die CGI-Programmierung
eingegangen, hier wird gezeigt wie Sie ein Formular in HTML aufsetzen können.
Ein Formular wird mit Hilfe des FORM-Tags aufgesetzt, es wird im BODY definiert:
<FORM action="aktien.cgi" method=post enctype="text/html">
Definition der Formularfelder
</FORM>
Das FORM-Tag hat folgende Attribute:
mit action wird die URL des Skriptes angegeben, das die Formulardaten
verarbeitet. Damit weiß der Browser, wo die Formulardaten hingeschickt werden
sollen.
Sollen die Daten per e-mail verschickt werden, können Sie folgenden Code verwenden:
<FORM action="mailto:info@irgendwo.tv" method=post enctype="text/plain">
Definition der Formularfelder
</FORM>
method=get bzw. post Dem Browser wird damit mitgeteilt, wie er die
Formulardaten an den Server schicken soll.
Wird GET gewählt, werden die Formulardaten an das Ende der URL des
prozessierenden Skriptes gesetzt.
Sollte der Server Beschränkungen bezüglich der Größe
von URLs haben, sollten Sie die POST-Methode wählen.
Bei der POST-Methode sendet der Browser die Formulardaten in einer getrennten
HTTP-Aktion an den Server.
Mit enctype wird der MIME-Typs des Files angegeben, das als
Formulareingabe verwendet werden soll.
Die Definition der Formularfelder wird unten erklärt.
MIME steht für Multipurpose Internet Mail Extensions.
Der MIME-Typ beschreibt welche Art Datei verschickt werden soll, ob es sich z.B.
um eine pdf-Datei handelt oder um ein Word-Dokument. Mit dieser Kennzeichnung weiß der Browser
bzw. Server wie er mit der entsprechenden Datei umzugehen hat, falls er den entsprechenden MIME-Typ
unterstützt. MIME-Typen werden in Kategorie/Unterkategorie eingeteilt.
| Kategorie: application |
| MIME-Typ |
Mögliche Dateiendungen |
Was für eine Datei? |
|
| application/octet-stream |
com exe bin dll class |
Dateien mit ausführbarem Code |
| application/pdf |
pdf |
PDF-Dateien |
| application/postscript |
ai eps ps |
Postscript-Dateien |
| application/x-latex |
latex |
LaTeX-Datei (Unix) |
| application/x-tar |
tar |
tar-Datei (Unix) |
| application/x-www-form-urlencoded |
|
HTML-Formulardaten an CGI |
| application/msword |
doc dot |
Microsoft Word-Dateien |
| application/mspowerpoint |
ppt ppz pps pot |
Microsoft Powerpoint-Dateien |
| application/msexcel |
xls xla |
Microsoft Excel-Dateien |
|
| Kategorie: image |
| image/gif |
gif |
GIF-Grafik |
| image/jpeg |
jpeg jpg jpe |
JPEG-Grafik |
|
| Kategorie: text |
| text/plain |
txt c cc g h hh m f90 |
reine Textdatei |
| text/html |
html htm |
HTML-Datei |
| text/x-sgml |
sgm sgml |
SGML-Datei |
| text/javascript |
js |
JavaScript-Datei |
| text/css |
css |
CSS Datei |
|
| Kategorie: video |
| video/mpeg |
mpeg mpg mpe |
MPEG Video |
| video/quicktime |
qt mov |
Quicktime-Video |
Hier finden Sie eine Liste weiterer
MIME-Typen.
Ein typisches HTML-Formular hat Eingabefelder ("input fields") und solche Felder (klickbare
Knöpfe) mit denen
die Daten abgeschickt werden oder die Daten in einem Formular
zurückgesetzt werden ("action buttons").
Alle diese Felder werden mit dem INPUT-Tag erzeugt. Die verschiedenen Arten von
Feldern werden mit dem Attribut TYPE und den Werten wie Text,
Radio, Hidden usw. festgelegt. Das Attribut NAME ist ebenfalls
notwendig, es legt einen einheitlichen Namen für ein Eingabefeld fest. Dieser Name ist wichtig
für das CGI-Skript und dient der Verarbeitung der Daten.
<FORM action="test.cgi" method=post enctype="text/html">
<INPUT TYPE="TEXT" NAME="Eingabe1" VALUE="vorgebener_Text" SIZE="10" MAXLENGTH="30">
</FORM>
Dieser Code erzeugt ein Textfeld:
Die einzelnen Werte werden in der Übersicht für Textfelder erklärt.
Bei den folgenden Feldern sind die FORM-Tags der besseren Übersicht weggelassen. Bitte denken Sie
bei der Umsetzung daran, Namen nicht doppelt zu vergeben, wenn Sie mehrere Felder in einem Formular
umsetzen. Das CGI-Skript kann die Daten nicht eindeutig verarbeiten oder läuft überhaupt nicht.
Hier erhalten Sie eine Auswahl an Elementen, aus denen ein HTML-Formular besteht. Zunächst werden Ihnen
Eingabefelder vorgestellt: in diese kann der Besucher seinen eigenen Text eingeben. Bei "Auswahl treffen" kann
der Besucher Ihrer Site aus einer vorgegebenen Auswahl etwas aussuchen. Zusammen mit den Action Buttions
können die eingegebenen Daten weggeschickt werden oder das Formular zurückgesetzt werden.
|
Eingabefelder
|
Auswahl treffen
|
Action Buttons
|
