Definieren von Formularen im HTML
HTML-Formulare und das <form>-Element
Die heutige Lektion behandelt das Erstellen von HTML-Formularen, die den Erhalt von Rückinformationen Ihrer Webseiten-Besucher ermöglichen. Formulare geben Ihnen die Möglichkeit, jegliche Art von Information zur sofortigen Bearbeitung durch Server-Scripts oder für spätere Analysen durch andere Anwendungen zu sammeln. Wenn Sie mit Surfen im Web viel Zeit verbracht haben, sind Sie sicherlich schon auf die unterschiedlichsten Formulare gestoßen. Es gibt viele Formulare: einfache Formulare, die für Suchvorgänge bestimmt sind, Formulare, die Sie in Web-Sites einloggen, Formulare, die Ihnen die Möglichkeit geben, Produkte Online zu bestellen usw. Alle diese Formulare haben eines gemeinsam: sie akzeptieren Inputs von einem Webseiten-Besucher.
Sollten Sie sich Sorgen um die Kompatibilität machen, kann ich Sie an dieser Stelle beruhigen.
HTML-Formulare gibt es nun schon seit Beginn der HTML-Sprache und sie werden von fast allen führenden Web-Browsern unterstützt. Ich werde Sie aber natürlich in unserer heutigen Lektion auf eventuelle Kompatibilitätsprobleme jeder Art aufmerksam machen.
Lassen Sie sich von Formularen nicht einschüchtern! Obwohl sie sehr komplex und kompliziert wirken, sind sie eigentlich sehr einfach zu verschlüsseln. Das Schwierigste ist das Formatieren von Formularen. Nach der heutigen Lektion werden Sie jede Art von Formular mit HTML erstellen können. Folgende Themen werden wir behandeln:
- Interaktion von HTML-Formularen und Server-Scripts, um Interaktivität zu kreieren
- Erstellung einfacher Formulare zum Einstieg
- Kennen lernen aller verfügbaren Formularfelder, die zur Erstellung von Radio-Buttons (Optionsfelder), Checkboxes (Kontrollkästchen) und mehr dienen
- Verwendung komplizierterer Formularfelder
- Das gut durchdachte und geplante Erstellen von Formularen, damit Daten jeder Art dem von Ihnen verwendeten Server-Script gewachsen sind
Verstehen von Formularen und ihrer Funktionen
Ja, Sie müssen natürlich einige Dinge über Formulare verstehen. Erstens, ist ein Formular Teil einer Webseite, die Sie mittels HTML-Elementen erstellen. Jedes Formular enthält ein <form>-Element, zu dem spezielle Formularfelder wie Schaltflächen, Textfelder, Checkboxen, Submit-Schaltflächen und Menüs gehören. Diese Formularfelder dienen als Benutzer – Interface für das Formular (es handelt sich hierbei um die Elemente, die Formularbenutzer auf der Webseite sehen können). Wenn Formulare ausgefüllt werden, entsteht eine Interaktion zwischen dem Benutzer und den Formularfeldern des Formulars. Sie können auch viele andere HTML-Elemente innerhalb von Formularen zur Erstellung von Legenden, zusätzlicher Informationen oder Strukturen usw. verwenden. Diese Elemente sind nicht Teil des Formulars, aber sie können das Aussehen Ihres Formulars verbessern oder seine Anwendungsmöglichkeiten erhöhen.
Ein HTML-Formular ermöglicht das Sammeln von Informationen, die Ihnen der Besucher Ihrer Webseite zukommen lässt. Sie können die aufgenommene Information an ein Script in Ihrem Web-Server senden, damit sie dort entweder bearbeitet oder gespeichert werden können.
Beim Ausfüllen eines HTML-Formulars werden Informationen eingegeben oder eine der Formular-Optionen mittels der Formularfelder ausgewählt. Schließlich erfolgt die Datenübertragung, die sich in mehrere Schritte unterteilen lässt. Zunächst ermittelt das Formular die Elemente, die Daten enthalten und bildet daraus einen Datensatz. Dieser wird im Anschluss codiert und an den Webserver gesendet, um dort verarbeitet zu werden.
Es ist sehr wichtig, diese Vorgänge der Datenübertragung gut zu verstehen. Die Daten sind immerhin das Wichtigste an der ganzen Sache: letztendlich haben Sie sich für die Erstellung eines Formulars entschlossen, weil Sie an diesen Besucher-Daten interessiert sind. Nachdem der Benutzer die Submit-Schaltfläche angeklickt hat, handelt es sich nicht mehr um einen reinen HTML-Vorgang. Die Verarbeitung wird meistens serverseitig durch Programme oder Scripten wie zum Beispiel CGI-Scripten (Common Gateway Interface) erfolgen. Mit anderen Worten, damit Ihr Formular erfolgreich verarbeitet werden kann,
muss bereits ein Script auf Ihrem Server liegen, das die Daten entgegen nehmen und sie speichern oder bearbeiten kann.
Es gibt einige wichtige Ausnahmen von dieser Regel, die man nicht außer Acht lassen sollte. Zum einen kann ein Formular einen Besucher abhängig von seinen Eingaben zu einer anderen Webseite weiterleiten. Die zweite Besonderheit ist sehr nützlich und ist gleichzeitig eine einfache Möglichkeit für Sie, Formulare zu testen. Anstatt ein Script zu benutzen, kann der Inhalt des Formulars auch an Sie gemailt werden. Eine letzte Besonderheit ist das gelegentliche Verwenden von Formularen in Dynamic HTML, da sie Benutzeraktionen, wie zum Beispiel das Mausklicken, abfangen. Ein Formular in Dynamic HTML dient nicht der Datensammlung, sondern der Erstellung von Schaltflächen, die es dem Benutzer ermöglichen, bestimmte Aktionen auszulösen.
Planen Sie Ihre Formulare
Bevor Sie anfangen, komplexe Formulare für Ihre Webseite zu erstellen, sollten Sie das Ganze planen, um sich auf Dauer gesehen Zeit und Ärger zu ersparen.
Entscheiden Sie zuerst, welche Informationen Sie benötigen. Das mag zwar selbstverständlich klingen, aber Sie müssen sich mit den Methoden zur Formularerstellung dann auseinandersetzen, wenn Sie noch keine Probleme damit haben.
Gehen Sie als Nächstes diese Information noch einmal durch und wählen Sie zu jedem Element ein entsprechendes Formularfeld. Fragen Sie sich selbst, welches Formularfeld am besten zu welcher Frage passt. Wenn Sie eine ja/nein Antwort möchten, sind Optionsfelder oder Checkboxen ideal, während das <textarea>-Tag zuviel des Guten ist. Versuchen Sie dem Besucher, der Ihr Formular ja ausfüllen soll, das Leben leichter zu machen, indem Sie ein Formularfeld erstellen, das auch zu der Frage passt. So wird das Analysieren einer Information mittels eines Scripts (wenn nötig) auch viel einfacher sein.
Sie sollten sich außerdem mit der Person, die das CGI-Script schreibt, die Feldnamen besprechen und die übrige Struktur mit dieser besprechen.
Es ist keine große Arbeit, jedes Formularfeld vor der Zusammenarbeit mit dem Script-Autor mit einem Namen zu versehen. Sie können auch Tabellen erstellen, die ausführliche Beschreibungen sowie die verfügbaren Werte von jedem Formularfeld enthalten.
Schließlich werden Sie vielleicht noch das Validieren von Formular-Inputs durch Scripting in Betracht ziehen. Mit einem clientseitigen Script – die Verarbeitung erfolgt also im Browser des Benutzers – können Sie die Benutzereingaben noch vor der Übermittelung zum Server prüfen. Auf diesem Weg stellen Sie sicher, dass das Formular erst dann an den Server übermittelt wird, wenn es vollständig ist. Sie können Script-Funktionen in jedes Formular-Element integrieren, wenn Sie das <submit>-Button integrieren und Immanent-Tags wie <onsubmit> verwenden.