Formulare

HTML bietet die Möglichkeit Formulare zu machen. Formulare sind dazu da, Daten zu erfassen. Da HTML aber keine Möglichkeit bietet, ein Formular auszuwerten, ist der einzige mir bekannte, sinnvolle Verwendungszweck für Formulare, der Versand per Email. Alle weiteren Verwendungen benötigen irgend eine Form von Scripten oder Programmen. Ich habe deshalb ein einfaches Feedback-Formular gemacht, bei dem ich vollständig auf alles verzichtet habe, was über HTML hinaus geht. Wenn du hier klickst, öffnet sich ein neues Fenster mit dem Feedback-Formular. Wenn du dieses Kapitel durch gearbeitet hast, bist du auch in der Lage so ein Formular zu machen.

Mit dem <form>Tag leitet man das Formular ein. Mit </form> beendet man es. Dazwischen ist alles erlaubt, was auch sonst in HTML-Seiten erlaubt ist. Das Formular muß auch nicht zwingend über die ganze Seite gehen. Es kann an einer beliebigen Stelle im Dokument sein.

Bei action= gibst du an, was mit den Formulardaten passieren soll. Normalerweise wird hier ein CGI-Programm auf dem Server aufgerufen, das die Daten weiter verarbeitet. Da solche Programme aber nicht zu HTML gehören, gehe ich in diesem Kurs auch nicht darauf ein. Die zweite Möglichkeit ist die Angabe mailto: mit einer Emailadresse. In diesem Fall werden die Daten an diese Emailadresse geschickt. Das klappt aber nur, wenn dein Besucher einen Browser benutzt, der Emails verschicken kann oder die Email automatisch an ein Emailprogramm weiter gibt. Der IE (ab Version 3.1) gibt die Email an ein entsprechendes Programm weiter. Der NN und Mozilla verschicken die Email selbst wenn er über ein entsprechendes Plug-in verfügt. Wenn er über dieses Plug-in nicht verfügt, oder es nicht konfiguriert ist, kann er die Email nicht verschicken.

Wenn die Formulardaten per Email übermittelt werden sollen, muß immer method="post" angegeben werden. Im Zusammenhang mit CGI gibt es auch method="get".

enctype="text/plain" ist eine Angabe des MIME-Typs. Die MIME-Typen sind im Zusammenhang mit Links schon mal kurz angesprochen worden. Hier wird dem Browser also mitgeteilt, um was für eine Datei es sich handelt. Die Daten sollen also als reiner Text behandelt werden. Ohne diese Angabe würden die Daten standardmäßig als MIME-Typ "application/x-www-form-urlencoded" behandelt werden. Dieses Format ist sehr gut dazu geeignet Daten an ein Programm weiter zu geben. Für Menschen ist es aber nicht gerade gut lesbar. Wenn du mal eine Email von einem alten Browser, der den MIME-Typ nicht richtig interpretiert hat, bekommst, weißt du wenigstens warum die Mail so aussieht. Alle Leerzeichen, Sonderzeichen, Satzzeichen und Formatierungen werden durch %HC ersetzt, wobei HC für eine zweistellige Hexadezimalzahl steht, die dem Zeichen entspricht.

Angenommen das Feedbackformular hat folgende Einträge:

Der Absender möchte als "Friedel" angesprochen werden, möchte eine Antwort haben, ist 31 bis 45 Jahre alt und lebt in Deutschland. Er weiß nicht mehr, wie er auf meine Seite kam, benutzt den IE und gibt als Fehlerbeschreibung "Übungen für Äbte in Klöstern in Österreich müssen auf der Straße gewährt werden." an. Den Rest des Formulars lasse ich weg, da er nichts neues offenbart.

So sieht die Email aus, die ich erhalte, wenn der MIME-Typ richtig angegeben ist und er richtig interpretiert wird.

So sieht die Email aus, die ich erhalte, wenn der MIME-Typ nicht richtig angegeben ist oder er aus anderen Gründen als application/x-www-form-urlencoded interpretiert wird.

Achte also immer auf die Angabe des MIME-Typs. Das <form>Tag darf Universalattribute enthalten.

Formularfelder

Einzeilige Formularfelder

Ein einzeiliges Formularfeld wird mit <input type="text" name="erstesFeld"> erzeugt. Natürlich muss das Formularfeld irgendwo zwischen <form> und </form>, also innerhalb des Formulars, sein. Die Angabe type="text" ist nicht zwingend erforderlich. Der Name, den du vergibst, darf nur aus Ziffern, Buchstaben und dem Unterstrich bestehen (keine Leerzeichen!). Das erste Zeichen muss ein Buchstabe sein. Wenn der Name nicht in Scripten verwendet werden soll sind zusätzlich der Punkt, der Doppelpunkt und der Bindestrich erlaubt. Der Name darf innerhalb des Formulars nur ein mal verwendet werden. Achte auch darauf, dass der Name in Anführungszeichen angegeben werden muss. Wie groß das Formularfeld dargestellt wird, ist vom Browser abhängig, wenn du keine Größe vorgibst. Es ist daher ratsam, die Größe mit size="20" fest zu legen. Statt 20 kannst du natürlich eine andere Zahl angeben. Sie beschreibt jedenfalls die Feldlänge in Zeichen. In ein Formularfeld, das mit <input type="text" name="01" size="20"> definiert wurde, passen also 20 (gleichzeitig sichtbare) Buchstaben. Wenn in das Feld mehr Zeichen eingegeben werden, wird automatisch gescrollt. Scrollbars erscheinen aber nicht.

Solche einzeiligen Formularfelder sind natürlich nur zur Eingabe einzelner Wörter, Zahlen oder kurzer Sätze sinnvoll. Grundsätzlich kann man in so ein Formularfeld auch das neue Testament eintippen. Wunder dich also nicht, wenn du auf die Frage: "Wie möchtest du gerne angesprochen werden?" die Antwort "Hairan Abu Ran´chel saba Mirshan Sarhidi Annuja Yassir Scheik Ybbas ibn Ygru" bekommst. Wer schon mal ein arabisches Zeugnis gesehen hat, weiß wovon ich spreche.

Du siehst, dass man mit maxlength= die Anzahl der maximal eingebbaren Zeichen festlegen kann.

Wenn in ein Feld, das mit <input type="text" name="erstesFeld"> erzeugt wurde, z.B. Hallo eingetragen wurde und das Formular abgeschickt wurde, erscheint in der Email der Text: erstesFeld=Hallo. Du (bzw. die Peson, die im Formular als Empfänger definiert wurde) bekommst also den Namen des Formularfeldes und den Inhalt des Feldes, getrennt durch ein Istgleich-Zeichen, übermittelt.

Text vorgeben

Du kannst in einem Formularfeld auch schon Text vorgeben. Das Feld links wurde mit <input type="text" name="Feld6" size="20" value="Hier Text eingeben"> erzeugt. Mit value= kannst du also festlegen welchen Text das Feld enthalten soll. Der Text muss in Anführungszeichen angegeben werden. Beim Versand der Email wird der Text mit verschickt, wenn er nicht überschrieben wurde.

Passwörter

Es gibt eine besondere Form von Eingabefeldern, die hauptsächlich für Passwörter benutzt wird. Mit <input type="password" name="Feld5" maxlength="14" size="14"> wurde das Feld links erzeugt. Der Unterschied zu normalen Eingabefeldern liegt darin, dass man statt dem eingegebenen Text nur Sterne sieht. Ob es tatsächlich Sterne oder andere Zeichen sind ist zwar vom Browser des Users abhängig, aber es sind bei allen mir bekannten Browsern Sternchen. Die Sterne schützen den Benutzer aber nur vor neugierigen Blicken auf den Bildschirm. Die Daten werden genau wie die Inhalte anderer Felder übertragen. Eine besondere Sicherheit bieten diese Felder also nicht.

Readonly

Formularfelder, die die Eigenschaft readonly haben können im Browser nicht verändert werden (read - engl.: lesen; only - engl.: nur; read only - nur lesen). Das Feld links wurde mit <input type="text" name="Feld7" size="50" value="Dieser Text kann nicht verändert werden" readonly> erzeugt. Achtung: NN 4 interpretiert diese Angabe nicht! Im NN 4 kann der Text überschrieben oder gelöscht werden.

Im nächsten Kapitel geht's um mehrzeilige Eingabefelder.

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: