SELFHTML: HTML/XHTML / Formulare / Formulare definieren
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie in HTML Formulare definieren, und wozu Formulare da sind.
Keywords: SELFHTML, HTML, XHTML, Formulare, E-Mail-Formulare, mailto-Formulare, post, get, form, action, method, enctype, target, accept-charset
Date: 2005-10-03T08:55:27+02:00

| # Formulare definieren
| Allgemeines zu Formularen Formularbereich definieren Zielfenster für Server-Antwort Zeichenkodierung der Formulardaten Weitere Informationen

## Allgemeines zu Formularen

HTML stellt die Möglichkeit zur Verfügung, Formulare zu erstellen. In Formularen kann der Anwender Eingabefelder ausfüllen, in mehrzeiligen Textfeldern Text eingeben, aus Listen Einträge auswählen usw. 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 die Daten dann von einem CGI-Programm auf dem Server-Rechner weiterverarbeiten lassen.

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

- um bestimmte, gleichartig strukturierte Auskünfte von Anwendern einzuholen,
- um Anwendern das Suchen in Datenbeständen zu ermöglichen,
- um Anwendern die Möglichkeit zu geben, selbst Daten für einen Datenbestand beizusteuern,
- um dem Anwender die Möglichkeit individueller Interaktion zu bieten, etwa um aus einer Produktpalette etwas Bestimmtes zu bestellen.

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 Web-Browser Eingabeformulare 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 Online-Shops im Internet. Egal ob Bücher, Tickets 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 Web-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 E-Mail-Adresse.

### Beachten Sie:

Nicht wenige Anbieter versuchen über Formulare, Anwenderadressen zu sammeln, um diese dann zu verkaufen, oder um Auskünfte einzuholen, zu denen ein Anwender nicht verpflichtet ist. Dazu wird häufig ein Anwenderbegehren als Köder benutzt - beispielsweise ein Gewinnspiel oder die Downloadmöglichkeit der kostenlosen Ausprobierversion einer teueren Software.

Dieser Missbrauch hat einige selbsternannte Hüter des Datenschutzes auf den Plan gerufen, die aber leider an der falschen Ecke kehren und sich nicht an die rechtlich meist gut abgesicherten Datenjäger wenden, sondern an ahnungslose Homepage-Besitzer, die ein kleines Formular im Web haben und plötzlich dafür abgemahnt werden. Dabei wird mit dem Prinzip der so genannten "Datensparsamkeit" argumentiert (siehe auch Hinweise zum Teledienste-Datenschutzgesetz (TDDSG) im Abschnitt Gesetze für "neue Medien" (in Deutschland)). Versuchen Sie also nicht, den Anwender mit Hilfe von Formularen wie eine Zitrone auszuquetschen. Beschränken Sie sich auf solche Formularfelder, die für den Formularzweck erkennbar nötig sind.

## Formularbereich definieren

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

### Beispiel:

    <form action="http://www.example.org/cgi-bin/feedback.pl" method="get">
    <!-- hier folgen die Formularelemente -->
    </form>

### Erläuterung:

Mit `<form>...</form>` definieren Sie ein Formular (form = Formular). Alles, was zwischen dem einleitenden `<form>`-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 Formularelemente zu platzieren und zu beschriften, können Sie dazwischen aber auch andere HTML-Elemente notieren. Dabei müssen Sie folgendes beachten: Gemäß der HTML-Variante Strict dürfen Sie innerhalb eines Formulars nur Block-Elemente (und Script-Bereiche) notieren, also etwa Überschriften, Textabsätze, allgemeine Bereiche oder Tabellen. In der HTML-Variante Transitional ist es dagegen außerdem erlaubt, zwischen `<form>` und `</form>` auch gemischten Inhalt aus Text und Inline-Elementen zu notieren. Innerhalb des `form`-Elements können Sie auch mit einem `fieldset`-Element arbeiten, um Formularelemente zu umschließen (siehe dazu Elemente gruppieren).

Im einleitenden `<form>`-Tag geben Sie mit dem Pflichtattribut `action` an, an welchen URI die Formulardaten beim Absenden des Formular übertragen werden sollen (action = Aktion). Der URI sollte die Adresse eines Programmes auf dem Server-Rechner sein, das die Formulardaten weiterverarbeitet. Üblicherweise handelt es sich dabei um ein CGI-Script, das z.B. in Perl und PHP geschrieben wurde.

Für den Wert des `action`-Attributes gelten die Regeln zum Referenzieren in HTML. Das Referenzieren mit relativen oder absoluten Pfadangaben ist also ebenso möglich wie das oben im Beispiel gezeigte Referenzieren mit einem absoluten URI:

    <form action="/cgi-bin/auswertung.pl">
    <form action="../../cgi-bin/suche.cgi">
    <form action="konktakt.php">

Eine weiteres wichtiges Attribut bei der Formulardefinition ist das Attribut `method`. Dabei bestimmen Sie, nach welcher HTTP-Übertragungsmethode die Formulardaten an ihr Ziel gelangen. Dabei gibt es zwei mögliche Werte:

- Wenn Sie `method="get"` wählen, hängt der Browser die Formulardaten als Parameter an die Aufrufadresse an (diese Angabe ist nicht zwingend erforderlich, da `get` als Default-Einstellung definiert ist). Beachten Sie, dass die Anzahl der übergebenen Zeichen je nach Browser auf ca. 2000 limitiert sein kann. Die Anfrage, die beim Server eintrifft, sieht dann beispielsweise so aus:
  `http://www.example.org/cgi-bin/feedback.cgi?AnwenderName=Stefan+M%FCnz&AnwenderMail=beispiel@example.org&Text=Das+ist+ein+kleiner+Text`. Das verarbeitende CGI-Programm kann diese als Parameter übergebene Zeichenkette auslesen und für die Datenverarbeitung auseinanderdröseln. Wenn Sie sich näher dafür interessieren, können Sie den Abschnitt HTML-Formulare und CGI lesen.
- Wenn Sie `method="post"` wählen, überträgt der Web-Browser die Formulardaten mit einer speziellen POST-Anfrage an den Web-Server (post = verschicken). Der Web-Server stellt die Daten dem CGI-Programm über den Standardeingabekanal zur Verfügung. Bei CGI-Scripts müssen Sie diese POST-Methode auf jeden Fall dann verwenden, wenn die Formulardaten zu umfangreich für die GET-Methode sind.

Das W3-Konsortium empfiehlt, die Methode `get` dann zu wählen, wenn das auswertende Programm die Daten nur zur Ablaufsteuerung benötigt (z.B. für eine Suche oder zum Weiterblättern), während die Methode `post` für Fälle empfohlen wird, in denen die Daten über das auswertende Programm hinaus weiterverarbeitet werden (z.B. Speicherung in einer Datenbank oder Auslösung einer Bestellung).

### Beachten Sie:

Es ist möglich, als Wert für das Attribut `action` eine E-Mail-Adresse anzugeben, z.B. `action="mailto:fritz.eierschale@example.org"` zusammen mit den Attributen `method="post" enctype="text/plain"`. Das erwünschte Ziel davon ist, dass der Web-Browser die Formulardaten an die angegebene E-Mail-Adresse versendet. Bei solchen E-Mail-Formularen besteht keine Garantie auf Erfolg. Es hängt vom Browser und anderen Einstellungen auf dem Rechner des Anwenders ab, ob der Formularversand klappt. E-Mail-Formulare gelten deshalb mittlerweile als überholt, zumal es Alternativen gibt. Mehr dazu im Abschnitt Formulare verarbeiten.

## Zielfenster für Server-Antwort

Wenn Sie mit Frames arbeiten und in einem Frame-Fenster ein Formular haben, nach dessen Absenden die Server-Antwort bzw. die Antwort eines CGI-Scripts in einem anderen Frame-Fenster angezeigt werden soll, können Sie das gewünschte Zielfenster angeben.

### Beispiel:

    <form action="/cgi-bin/auswertung.pl" method="get" target="Daten">
    <!-- hier folgen die Formularelemente -->
    </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. Es muss sich entweder um einen Fensternamen handeln, der für ein Frame-Fenster dem `name`-Attribut im `<frame>`-Tag vergeben wurde, oder um einen der folgenden reservierten Fensternamen:
`_self`, um die Server-Antwort im aktuellen Fenster auszugeben,
`_parent`, um für die Server-Antwort bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
`_top`, um für die Server-Antwort bei verschachtelten Framesets alle Framesets zu sprengen.

### Beachten Sie:

Das `target`-Attribut ist zwar nicht als deprecated gekennzeichnet, doch um es einzusetzen, müssen Sie die HTML-Variante Transitional verwenden. Der Grund ist, dass dieses Attribut vorwiegend für Verweise bei Verwendung von Frames gedacht ist und Frames eine eigene HTML-Variante haben, die von der Einstufung her der Variante Transitional entspricht.

## Zeichenkodierung der Formulardaten

Sie können angeben, mit welcher Zeichenkodierung der Browser die eingegebenen Formulardaten an den Web-Server senden soll. Dabei können Sie eine oder mehrere Kodierungen angeben, aus denen der Browser eine unterstützte auswählen kann. Näheres zu Zeichenkodierungen können Sie auf der Seite Computer und geschriebene Sprache nachlesen.

### Beispiel:

    <form action="/cgi-bin/auswertung.pl" method="post" accept-charset="ISO-8859-1">
    <!-- hier folgen die Formularelemente -->
    </form>

### Erläuterung:

Mit dem Attribut `accept-charset` können Sie Kodierungen angeben. Trennen Sie mehrere Angaben durch Leerzeichen oder Kommata. Erlaubt sind Kodierungsangaben, wie sie auf der Web-Adresse http://www.iana.org/assignments/character-sets angegeben sind. Die im Beispiel genannte Kodierung ISO-8859-1 wird insbesondere auf der Seite Zeichenkodierungen (ISO-8859-Familie und andere) beschrieben.

### Beachten Sie:

Die Implementierung der Zeichenkodierung beim Formulardatenversand ist in den einzelnen Browsern unterschiedlich gelöst. Daraus resultieren diverse Probleme bei der Erkennung, welche Kodierung tatsächlich benutzt wurde.

Um Problemen absolut aus dem Weg zu gehen und sicherzustellen, dass die gesendeten Daten in einer verarbeitungsfähigen Form bei Ihnen ankommen, beachten Sie die folgenden Hinweise:

- Verwenden Sie nur eine einzige Kodierungsangabe im Attribut, keine Liste von mehreren Alternativen. Ein Browser ist nicht gezwungen, die "passendste" Kodierung zu verwenden, er kann auch einfach die allererste verwenden. Da die meisten Browser nicht mitsenden, welche Kodierung tatsächlich verwendet wurde, wäre es Ihnen unmöglich zu erkennen, welche Kodierung verwendet wurde. Bei nur einer eingetragenen Möglichkeit sind keine Zweifel möglich.
- Setzen Sie die Angaben für die Kodierung im HTTP-Header (per Serverkonfiguration - wird derzeit in SELFHTML nicht behandelt), im Meta-Tag und im Attribut `accept-charset` auf identische Werte. Manche Browser werden verwirrt und verhalten sich u.U. unvorhersehbar, wenn sich diese drei Angaben widersprechen.
- Um wirklich alle eingebbaren Zeichen der Benutzer erhalten zu können, benutzen Sie die Unicode-Kodierung UTF-8. Da UTF-8 relativ neu ist und erst in den letzten Jahren Verbreitung gefunden hat, könnten alte Browser mit dieser Kodierung Probleme haben - diese werden allerdings zum Glück immer seltener eingesetzt.

Probleme mit unpassender Kodierungsangabe im Formular zeigen sich durch die folgenden möglichen Indizien:

- Umlaute werden "zerstört", d.h. anstelle des Umlauts stehen ein oder mehrere anscheinend sinnlose Zeichen, die normalen Buchstaben von A bis Z erscheinen jedoch problemlos. Dieses Problem tritt auf, wenn die Kodierung der eingegebenen Daten eine andere ist, als die der ausgegebenen Daten, ohne dass eine entsprechende Umkodierung erfolgt.
- Anstelle von Zeichen tauchen numerische Zeichenreferenzen der Form `&#1234;` im Text auf. Alternativ erscheinen anstelle der Zeichen auch Fragezeichen. In beiden Fällen hat der Benutzer ein Zeichen in das Formular eingegeben, welches sich mit der Kodierung laut `accept-charset` des Formulars nicht kodieren lässt.

Wenn Sie Ihre Formulare und die serverseitigen Skripte in die Lage versetzen, UTF-8 zu verarbeiten, können alle diese Probleme umgangen werden. Die Verwendung von UTF-8 bzw. generell Unicode ist daher sehr empfehlenswert - auch wenn Sie keine internationale Website planen.

## Weitere Informationen

In der HTML-Referenz finden Sie Angaben darüber, wo das `form`-Element vorkommen darf, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für Formulare (`<form>...</form>`)
Attribut-Referenz für Formulare (`<form>...</form>`)

Zur Datenverarbeitung von Formularen mit Hilfe von CGI-Scripts gibt es innerhalb der vorliegenden Dokumentation das Kapitel CGI/Perl.

| Eingabefelder und Eingabebereiche
| Verweis-sensitive Grafiken (Image Maps)

© 2007 Impressum