HTML Einführung: Formulare

Zurück || Weiter

Index

Startseite

HTML Einführung: Formulare

Formulare in einem HTML-Dokument

Verweise

In diesem Kapitel finden Sie Informationen über:

Das Formular-Tag
Input - vielseitiges Eingabeobjekt
Mehrzeilige Eingabefelder
Auswahllisten

Allgemeines

In diesem Kapitel wollen wir uns mit den Tags beschäftigen, mit denen sich Formulare erstellen lassen. Das sind nichts anderes als Eingabemasken in einem HTML-Dokument. Der Inhalt der Eingabefelder dieser Formulare kann per e-mail verschickt oder an einen Server geschickt werden, der die Daten auswertet und als Ergebnis z.B. ein neues HTML-Dokument zurückgibt. (Beispiel: Eine Seite mit der Rückmeldung "Danke für Ihre Anfrage! Wir kümmern uns um Ihr Anliegen...")

Wie der Server diese Anfragen bearbeitet, wollen wir im übernächsten Kapitel untersuchen, an dieser Stelle interessiert uns nur, wie ein Formular erstellt werden kann. Dabei können durchaus mehrere Formulare auf einer Seite erscheinen!

Das Formular-Tag

Ein Formular wird durch das Tagpaar <form>...</form> eingeklammert. Im <form>-Tag sollen zusätzlich die Optionen action="URL" und method=post | get angegeben werden. URL ist dabei entweder ein Verweis auf ein Programm, das die Formularinhalte weiterverarbeitet oder eine Angabe der Form mailto:email-adresse, wenn der Formularinhalt per e-mail verschickt werden soll.

Wenn Sie method="get" wählen, werden die Daten des ausgefüllten Formulars auf dem Server-Rechner in einer Umgebungsvariablen (QUERY_STRING) gespeichert, deren Inhalt das weiterverarbeitende Programm auslesen kann. Wählen Sie method="post", werden die Daten des augefüllten Formulars dem Programm auf dem Server-Rechner von der Standardeingabe (stdin) zur Verfügung gestellt.

Wenn Sie sich Formulardaten per e-mail zuschicken lassen, benutzen Sie immer method="post" und die Angabe enctype="text/plain". Letzteres hat die angenehme Nebenwirkung, dass Sie eine ordentlich formatierte e-mail erhalten anstatt eines kilometerlangen Einzeilers, der für auswertende Programme zwar nützlich, für Menschen aber keine Freunde zu lesen ist.

Eine weitere Option für das <form>-Tag ist name. Man kann jedem Formular damit einen internen Namen geben. Das ist aber nur dann wichtig, wenn Sie das Formular z.B. zur Überprüfung der Eingaben mit JavaScript-Routinen ansprechen wollen. - JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. In dieser HTML-Einführung wird es daher nicht behandelt. Wenn Sie sich näher dafür interessieren, führen Sie sich bitte die weiterführende Literatur zu Gemüte!

Beispiel für Formular, das von einem Perl-Script weiterverarbeitet wird:

Beispiel für Formular, das per e-mail verschickt wird:

Input - vielseitiges Eingabeobjekt

Das Tag <input> taucht wohl am häufigsten innerhalb eines Formulars auf. Es besitzt kein schließendes Tag. Folgende Optionen können dabei benutzt werden:

Optionen für das <input>-Tag
Option Beschreibung
name Definiert den Namen des Formularobjektes (Feldes). Dieser ist unbedingt nötig, da nur die Inhalte der Felder verschickt werden, die einen Namen haben.
type Bestimmt das Aussehen und Verhalten des Formularobjektes (Feldes) bei Eingaben. Folgende Typen sind dabei erlaubt: (Beachten Sie bitte die Kleinschreibung!)

text - erlaubt die Eingabe von einzeiligen Texten.
password - erlaubt die Eingabe eines Passwortes. Bei der Eingabe werden nur '*'-Zeichen (Stern) dargestellt.
checkbox - erlaubt die Eingabe eines Ja/Nein-Wertes. (Ein/Aus)
radio - erlaubt die Auswahl eines Elementes aus einer Liste von Elementen.
hidden - ist ein Feld mit Namen und Wert, das der Benutzer weder sehen noch ändern kann. Es dient zur Übermittlung versteckter Daten.
image - ist ein Bild, das angeklickt werden kann. An den Server wird sofort der Name des Bildes und die XY-Position des Mausklicks übermittelt. - Eine andere Art von verweis-sensitiver Grafik also.
submit - Button; wenn gedrückt, wird der Formularinhalt an den unter action angegebenen URL übermittelt.
reset - Button; setzt, wenn gedrückt, alle Felder des Formulars auf ihre Voreinstellungen zurück (siehe auch: Option value).
Der genaue Aufbau eines Formulars wird im Anschluss an diese Tabelle ausführlich beschrieben.
maxlength Gibt an, wieviele Zeichen maximal in ein Feld vom Typ text eingegeben werden dürfen.
size Gibt an, wieviele Zeichen breit ein Feld vom Typ text dargestellt werden soll. Ist maxlength größer als size, wird gescrollt.
value Legt beim Typ text den voreingestellten Text fest. Beim Typ radio muss diese Option angegeben werden, um den Wert, der beim Absenden verschickt wird, zu definieren.
checked Definiert, dass der Radiobutton (Typ radio) oder der Eintrag einer Checkbox (Typ checkbox) als aktiviert/ausgewählt dargestellt wird.

Wir kennen jetzt fast alle Eingabeobjektarten von <form>, nun müssen wir nur noch wissen, wie diese sinnvoll einzusetzen sind. Dies soll im Folgenden beschrieben werden.

Texteingabefeld

Fangen wir zuerst einmal mit einem Texteingabefeld an. Der HTML-Code

<input name="Kundenname" type="text" maxlength=30 size=20>
führt zum folgenden Eingabefeld, das maximal 30 Zeichen aufnehmen kann und davon 20 Zeichen gleichzeitig darstellt:

Soll das Eingabefeld mit einem Wert vorbelegt werden, so muss das Tag wie folgt aussehen:

<input name="Kundenname2" type="text" value="Peter Bittner" maxlength=30 size=20>
Hier das Ergebnis des Codes (innerhalb von <form>...</form>):

Passworteingabefeld

Ein gültiger Code für ein Passworteingabefeld könnte wie folgt aussehen:

<b>Passwort:</b> <input name="LoginPWD" type="password" size=15>
und hier das Ergebnis:

Passwort:

Checkboxen

Checkboxen sind eine Gruppe von Eingabeobjekten, aus der der Anwender keinen, einen oder mehrere markieren ("ankreuzen") kann. Die Werte (value) von markierten Checkboxen werden beim Absenden des Formulars mit übertragen. (Das ist auch der Grund, warum jede Checkbox eine value-Angabe besitzen muss!) - Soll die Checkbox in der Voreinstellung als ausgewählt erscheinen, kann dazu die Option checked angegeben werden.

Ein einfacher Code:

<form> <b>Geben Sie die Zutaten für Ihre Wunschpizza an:</b><br> <input type="checkbox" name="Zutat" value="Rosinen">Rosinen <input type="checkbox" name="Zutat" value="Zwetschken">Zwetschken <input type="checkbox" name="Zutat" value="Salami" checked>Salami </form>
...erzeugt dieses Formular:

Radiobuttons

Radiobuttons sind als Gruppe von Eingabeobjekten ähnlich den Checkboxen, allerdings kann jeweils nur ein Element aus der angegebenen Liste ausgewählt werden:

Ein einfacher Code:

<form> <b>Geben Sie Ihre Zahlungsweise an:</b><br> <input type="radio" name="Zahlmethode" value="MC" checked>Mastercard <input type="radio" name="Zahlmethode" value="Visa">Visa <input type="radio" name="Zahlmethode" value="AmEx">American Express </form>
Hier das Ergebnis:

Reset und Submit

Reset und Submit sind zwei Knöpfe (engl. Buttons), die - wenn sie gedrückt werden - sich auf das gesamte Formular auswirken:

Mit dem reset-Button kann der Anwender alle Eingabefelder des Formulars auf die Voreinstellungen zurücksetzen. Mit submit kann er das ausgefüllte Formular losschicken. Mit den Formulardaten geschieht dann das, was im einleitenden <form>-Tag mit der Option action festgelegt wurde.

<form action="start.html" method="get"> <b>Klicken Sie auf "Starten", um zur Startseite zu gelangen:</b><br> <input type="submit" value="Starten"> <input type="reset" value="Rücksetzen"> </form>
ergibt:

Anmerkung: Beim Drücken von "Rücksetzen" passiert hier gar nichts. - Warum ist auch klar: In diesem Formular haben wir ja gar keine Eingabefelder!

Hinweis: Man kann den submit-Button also auch als Verweisknopf "missbrauchen". - Beachten Sie übrigens nach dem Drücken von "Starten" die Adressleiste des Browsers: Dort scheint eine Angabe der Form URL?Formulardaten auf. Mit method="get" werden nämlich alle Formulardaten nach dem ? mit der URL-Zeile übermittelt!

Grafiken als Formularobjekt

Neben den Hotspots in Grafiken ist es auch möglich, die XY-Position eines Mausklicks auf eine Grafik direkt an den Server zu schicken. Dazu dient der Formulartyp image mit den Optionen src (für die Angabe der benötigten Grafikdatei) und optional align mit den bereits vorgestellten Ausrichtungen.

<form> <input name="Bild" type="image" src="img/computer.gif"> <p> <i>Klicken Sie auf das Bild und schauen Sie in der Adressleiste, welche Koordinaten ermittelt werden!</i> </form>
ergibt:

Textarea - Mehrzeilige Eingabefelder

Möchten Sie es dem Benutzer erlauben, mehrzeilige Texte einzugeben, so kommt das <textarea>-Tag zum Einsatz. Der Text zwischen dem Anfangs- und dem Endetag wird als Voreinstellung genommen. Das <textarea>-Tag hat folgende Optionen:

name - der obligatorische interne Name
rows=Zahl, cols=Zahl - Anzahl der Zeilen und Spalten
wrap=virtual | physical | off - Zeilenumbruchskontrolle
readonly - damit der vorgegebene Text nicht geändert werden kann

Die Optionen rows (Zeilen) und cols (Spalten) bestimmen die Ausdehnung des Textbereiches. Mit wrap=virtual erreichen Sie, dass der Text für den Anwender am Bildschirm automatisch umgebrochen wird, übertragen wird er jedoch ohne diese Zeilenumbrüche. wrap=physical bewirkt einen tatsächlichen Umbruch, also auch für den Text, den Sie erhalten. Default-Einstellung ist (ärgerlicherweise) wrap=off: Damit ist der automatische Umbruch ausgeschaltet. Seit HTML 4.0 können Sie mit der Angabe von readonly verhindern, dass der Anwender den vorgegebenen Text ändern kann. Das kann z.B. bei effektvollen Copyright- oder Nutzungshinweisen nützlich sein:

<form> <textarea name="Copyrighthinweise" cols=66 rows=5 readonly> Diese HTML-Einführung ist Freeware. Sie darf, solange sie _unverändert_ bleibt, frei kopiert werden, auf FTP-Servern zum Download angeboten und sogar auf kommerzielle CD-ROMs gebrannt werden. Bei Veröffentlichungen, CD-ROMs u.dgl. wäre es eine nette Geste, dem Autor eine Mitteilung bzw. ein Exemplar zu übersenden. Für Kontaktinformationen schauen Sie bitte auf meine Homepage: http://beam.to/bimbo </textarea> </form>
Das Resultat:

Diese HTML-Einführung ist Freeware. Sie darf, solange sie _unverändert_ bleibt, frei kopiert werden, auf FTP-Servern zum Download angeboten und sogar auf kommerzielle CD-ROMs gebrannt werden. Bei Veröffentlichungen, CD-ROMs u.dgl. wäre es eine nette Geste, dem Autor eine Mitteilung bzw. ein Exemplar zu übersenden. Für Kontaktinformationen schauen Sie bitte auf meine Homepage: http://beam.to/bimbo

Auswahllisten - Select

Mit dem Tagpaar <select>...</select> können Sie dem Anwender eine Liste mit festen Einträgen zur Verfügung stellen, aus der er einen Eintrag auswählen kann. Der Text des ausgewählten Eintrags wird übertragen, wenn der Anwender das Formular abschickt. Folgende Optionen sind für das <select>-Tag verfügbar:

name - der obligatorische interne Name
size=Zahl - Höhe der Auswahlliste (in Listeneinträgen)
width=Zahl - Mindestbreite der Auswahlliste (in Pixel)
multiple - wenn mehrfache Einträge ausgewählt werden dürfen

Die einzelnen Elemente der Liste werden durch das Tag <option> beschrieben. Dieses Tag ist nur innerhalb von <select>...</select> verfügbar. Mögliche Optionen dafür:

selected - dieses Element als ausgewählt markieren
value="Wert" - definiert den Wert, der übertragen wird

Standardmäßig erlaubt select nur eine einfache Auswahl (wie bei den Radiobuttons), wird allerdings die Option multiple im <select>-Tag angegeben, so ist eine mehrfache Auswahl (wie bei den Checkboxen) möglich. Die size-Angabe bestimmt die Höhe der Auswahlliste, der breiteste Eintrag die Breite, falls width nicht angegeben wird oder kleiner als der breiteste Eintrag ist.
Im <option>-Tag können Sie mit value den Wert definieren, der übertragen werden soll. Ohne die Angabe von value wird ja der Text der Anzeige verschickt.

Hier ein einfaches Beispiel:

<form> <b>Wählen Sie Ihre Lieblings-Reiseziele aus!</b><br> <select name="Reiseziele" size=4 multiple> <option>Hamburg (Deutschland) <option selected>Klagenfurt (Österreich) <option>New York (USA) <option>Rom (Italien) <option>Wien (Österreich) </select> </form>
Et voilà:

Tip: Mit der Angabe size=1 erhalten Sie ein "Drop-Down-Menü" (eine sog. Combo-Box), die oft nützlich ist, wenn der Benutzer nur einen Eintrag auswählen soll:

<form> <b>Ihr Reiseziel:</b> <select name="Reiseziel" size=1> <option>- Bitte wählen Sie aus! - ... </select> </form>

Zusammenfassung und Beispiel

Basteln wir uns etwas, das man sofort verwenden kann: Ein e-mail Formular!

<font size="+1"><b>E-Mail an den Autor</b></font> <p> <form action="mailto:peter.bittner@gmx.net" method="post" enctype="text/plain"> <b>Name:</b> <input maxlength=70 size=22 name="Name"><br> <b>E-mail:</b> <input maxlength=70 size=25 name="Email"><br> <b>Was ich von dieser Einführung halte:</b><br> <textarea wrap="virtual" cols=30 rows=10 name="Feedback">Lieber Peter,</textarea><br>         <input type="submit" value="Absenden"> <input type="reset" value="Rücksetzen"> </form>

E-Mail an den Autor

Name:
E-mail:
Was ich von dieser Einführung halte:
Lieber Peter,

Sie können mit diesem Formular dem Autor dieser HTML-Einführung wirklich eine e-mail schicken!

Anmerkung: Die Daten dieses Formulars werden völlig unüberprüft abgeschickt. Das ist meist nicht im Sinne des Erfinders / Programmierers bzw. Verwalters der Homepage, denn nichts ist ärgerlicher, als dass ein leeres Formular abgeschickt wird, dass man eine unsinnige e-mail zugesandt bekommt u.ä.

Um derartige Abfragen durchzuführen, verwendet man üblicherweise JavaScript. (Wie oben bereits erwähnt, wird diese Programmiersprache hier aber nicht behandelt.) - Es ist natürlich auch möglich, diese Überprüfungen dem die Formulardaten verarbeitenden Programm zu überlassen. Bei per e-mail zugesandten Formulardaten geht das aber klarerweise nicht...

Wenn Sie weitere Anwendungsbeispiele von Formularen dieser Art sehen wollen, schauen Sie sich am besten die Homepage der Österr. Gesellschaft für Gesundheitsförderung an!

Für das Abschicken von Formulardaten an ein Programm auf einem Server haben Sie bitte noch etwas Geduld: Im nächsten Kapitel wollen wir uns nämlich zun�chst mit Serverside Includes beschäftigen. Im Anschluss daran kommen wir auf Formulare auf der Serverseite zu sprechen.

Zurück || Weiter

Index

Startseite