Das Homepage-Handbuch speziell für blutige Anfänger

Spezielle Elemente einer Webseite - Das Formular

Grundsätzliches über Formulare

Wozu dienen Formulare?

Kontaktaufnahme (Email an den Homepagebetreiber)
Datensammlung (Umfrage, Anmeldung, Bestellung)
Textausgabe (Platzsparende Verfügbarmachung eines Textes)
Datenausgabe (Ergebnisse anzeigen; üblicherweise in Verbindung mit einem Script)

Wie funktioniert das?

Kontaktformular und Datensammlung

Ein Formular besteht aus einem oder mehreren Eningabefeldern. Diese füllt der Homepagebesucher aus. Abschließend klickt er auf den Absende-Button, ein spezielles Formularsteuerelement, welches die Daten (Namen und Werte der ausgefüllten Formularfelder) überträgt. Grundsätzlich unterscheidet man dabei zwei Möglichkeiten:

Übergabe der Formulardaten an ein Serverprogramm
Versand der Formulardaten per Email

Foren, Gästebücher und sonstige automatisch funktionierende Datensammler beruhen auf einem Computerprogramm, das direkt auf dem Webserver laufen muss. In dem Falle werden die Formulardaten direkt an dieses Programm übergeben und dort in geeigneter Weise weiterverarbeitet, gespeichert oder einfach nur weitergeleitet. Es kommt also die 1. Möglichkeit zur Anwendung.

Als Anfänger werden Sie aber sicher noch nicht über ein solches Serverprogramm verfügen. Ihnen bleibt daher nur die 2. Möglichkeit. Sie müssen es so einrichten, dass die Formulardaten per Email verschickt werden. Damit das funktioniert, müssen gewisse Voraussetzungen erfüllt sein. Andernfalls kann es ggf. zu Problemen bei der Codierung kommen (Zeichensalat) oder die Übertragung klappt überhaupt nicht (kein Mailprogramm oder Mailprogramm startet nicht automatisch oder Übertragung wird durch Sicherheitssoftware unterdrückt oder Benutzer weigert sich ganz einfach, die Email abzuschicken.)

Text- bzw. Datenausgabe

Im Gegensatz zum Kontaktformular oder zu einer Datensammlung sollen hier nur Text oder Daten ausgegeben werden. Der Benutzer muss nichts absenden. Statt dessen wird dem Benutzer ein bereits ausgefülltes Formular bzw. ein mit Text gefülltes Textfeld präsentiert. Das ist möglich, weil man jedem Formularfeld einen Startwert mitgeben kann. Außerdem können Formularfelder auch mittels JavaScript ausgelesen und ausgefüllt werden. Damit sind einfache Berechnungen und Interaktionen möglich.

Die Formular-Elemente (Formularfelder)

Einzeiliges Textfeld: Hier darf der Benutzer einige Worte eingeben. Also z.B. einen Namen oder ein Passwort.	Ein Wort: Ein Passwort:
Mehrzeiliges Textfeld mit Laufleiste: Hier passen mehrere Absätze hinein, damit der Benutzer einen beliebigen Text entwerfen kann.	Jede Menge Text in mehreren Zeilen mit oder ohne Komma, nach Belieben wie der Schnabel gewachsen ist.
Dropdown Auswahlmenü: Hier kann der Benutzer eine aus mehreren Möglichkeiten auswählen.
Kontrollkästchen (Check-Boxen): Diese kann der Benutzer anklicken, um sie zu aktivieren oder auch wieder zu deaktivieren.	Wahl 1 Wahl 2 Wahl 3
Optionsschaltflächen (Radio-Boxen): Sind dazu da, dass man eine aus mehreren Boxen aktiviert. Im Gegensatz zur eckigen Check-Box kann man eine Radio-Box nicht durch nochmaliges Klicken wieder deaktivieren. Aber durch das aktivieren einer Box werden die zugehörigen anderen Boxen automatisch deaktiviert.	Wahl 1 Wahl 2 Wahl 3
Datei-Eingabefeld mit Button: Hier kann man einen Dateinamen eingeben oder diesen auf der lokalen Festplatte aussuchen. Wenn man die ausgesuchte Datei aber tatsächlich übertragen will, dann benötigt man ein zusätzliches Script. Da Namo dieses nicht zur Verfügung stellt, können Sie als Anfänger nur den Dateinamen übermitteln.
Steuer-Buttons: Hierbei verwendet man den Übertragungsbutton, damit der Benutzer seine Formulardaten absenden kann. Außerdem gibt es einen Button "Löschen" oder "Zurücksetzen", mit dem der benutzer sämtliche Formulardelder zurück auf den Standardwert setzen kann.	(Buttons dienen hier nur als Beispiel ohne Funktion)
Bilder-Buttons: An Stelle des Standardbuttons kann man ein Bild verwenden. Der Klick darauf wird nicht von allen Browsern 100% korrekt ausgewertet. Vielleicht sollten Anfänger diese Buttonform lieber nicht verwenden.

Ein Formular erstellen

######### Damit ein Formular richtig funktioniert, muss es als solches definiert werden. Namo WebEditor erledigt das automatisch, wenn man ein Formularfeld einfügt. Zuständig dafür ist ein Schalter im Menü 'Einfügen-Formular': Mit Formulartags einfügen. Aktiviert man diese Option, dann erzeugt Namo WebEditor bei Bedarf automatisch ein Formular.

Hierbei wird ein Bereich definiert und im Editor durch eine gestrichelte Linie markiert. Alle Formularfelder innerhalb dieses Bereiches gehören zu diesem Formular.

#########

Mit Namo WebEditor erzeugen Sie ein Formular, indem Sie einfach das erste Formularfeld einfügen. Beginnen Sie am besten mit der Schaltfläche zum Absenden der Formulardaten.
Wählen Sie also aus dem Menü: Einfügen - Formular > Schaltfläche. Sie sehen dann den Eingabedialog "Schaltfläche - Eigenschaften".
#########
Geben Sie dort als Wert das Wort "Absenden" ein und achten Sie darauf, dass der Typ "Übermittlung" aktiviert ist. (Die anderen beiden Typen besprechen wir weiter unten.) Klicken Sie auf [OK] Das Ergebnis dürfte in etwa so aussehen:
#########
Tipp: Wenn bei Ihnen im Editor nur der Button auftaucht, aber nicht die gestrichelte Linie, dann aktivieren Sie bitte die "Speziellen Tag-Markierungen". In Namo 6 bzw. 2006 finden Sie diese im Menü "Anzeige". Dort klicken Sie auf "Markierungen". Bei Namo 8 suchen Sie im Ribbon-Menü "Anzeige" die Sektion "Anzeige" und dort das Symbol für "spezielle Tag-Markierungen".

Da Sie als Anfänger vermutlich noch keinen Formhandler auf dem Server haben, können Sie das Formular nur für den Versand per Email einrichten. Dies legen Sie fest in den Formulareigenschaften. Sie rufen diese auf, indem Sie mit der rechten Maustaste auf das Formular (irgendwo in den Formularbereich) klicken und dann aus dem Kontextmenü auswählen: "Formulareigenschaften"
#########
Dieses füllen Sie nun aus wie im obigen Beispiel. Durch die Aktion "mailto:" werden die Formulardaten per Email verschickt an die darauf folgende Mailadresse. Dort sollten Sie also im Normalfall Ihre eigene Mailadresse eingeben. Die Methode POST und der Codierungstyp "text/plain" sind für diese Übertragungsart obligatorisch.

Alles in allem haben Sie dann folgenden HTML-Quelltext vorliegen:

Im Editor sehen Sie noch immer folgendes, da die Formulareigenschaften sich bis dahin nicht auf das Aussehen des Formulares auswirken, sondern nur auf das was geschieht, wenn jemand den Absende-Button klickt.
#########

Formularfelder einfügen

Das Formular ist jetzt bereit. Sie können damit beginnen - bzw. fortfahren - weitere Eingabefelder einzufügen. Um etwas Ordnung in die Sache zu bringen, können Sie aber auch erst einmmal eine Tabelle in den Formularbereich einfügen. Im folgenden Beispiel erzeugen wir ein einfaches Kontaktformular:

Zuerst bringen Sie die Schreibmarke in den Formularbereich. Also in diesem Beispiel direkt hinter den Absende-Button. Dort fügen Sie dann eine kleine Tabelle ein. Etwa wie in der folgenden Abbildung:
#########
In die Tabellenzellen fügen Sie dann rechts die Eingabefelder ein und links die Beschriftungen.
Den Button 'Absenden' nehmen Sie mit der Maus und verschieben ihn in die Tabellenzelle unten rechts unter dem Nachrichtenfeld. Und dort wo vorher der Button war, ist jetzt Platz für eine Überschrift.
Im Browser sieht das Formular dann schon wie folgt aus und ist im Prinzip auch schon einsatzbereit:

Beispiel-Kontaktformular

Ihr Name:
Ihre Email-Adresse:
Ihre Nachricht an mich
Fertig? Dann absenden:

Ging Ihnen das jetzt zu schnell?
Vielleicht wollen Sie noch einmal nachlesen, wie man eine Tabelle erstellt?

Aber vielleicht möchten Sie gern noch näheres über die Eigenschaften der einzelnen Formularelemente wissen.
Dann lesen Sie einfach weiter:

Eigenschaften von Formularfeldern

Das einzeilige Textfeld

#########

Name:
Das Formularfeld hat einen Namen, an dem der Formhändler es identifizieren kann. Auch wenn Sie die Formulardaten per Mail bekommen, ist dieser Name sehr nützlich. Geben Sie hier also ruhig einen treffenderen Namen ein als das von Namo WebEditor vorgegebene "formtext1", "formtext2" u.s.w. In diesem Beispiel würde das erste Textfeld den Namen "Name" bekommen und das zweite nennen wir "Email".

Anfänglicher Wert:
Mit dem anfänglichen Wert können Sie das Feld bereits vorab ausfüllen. Wenn das Formular übermittelt wird, dann erhalten Sie eine Textzeile mit dem Namen und dem Wert des Textfeldes.

Breite (Zeichen), Maximale Eingabelänge, Eingabetyp:
Die weiteren Einstellungen betreffen das Aussehen des Textfeldes. Sie können bestimmen, wie viele Zeichen das Textfeld darstellen kann. Es ist aber durchaus möglich, auch mehr einzugeben, als das Feld anzeigen kann. Der Text scrollt dann bei der Eingabe horizontal. Legen Sie fest, wieviele Zeichen maximal in das Feld hinein passen sollen. Wenn Sie nicht wollen, dass der Text evtl. horizotal scrollt, dann wählen Sie eine maximale Eingabelänge kleiner oder wie die Feldbreite. Schließlich können Sie noch den Eingabetyp umschalten zwischen Standardtext und Kennwort. Im Kennwortmodus wird der Text während der Eingabe nicht angezeigt. Hier ein typisches Kennwortfeld:

Hier der HTML-Code für ein einzeiliges Textfeld und zum Vergleich dazu auch der Code für ein Kennwortfeld:

Das mehrzeilige Textfeld mit Laufleiste

Damit der Benutzer einen beliebigen Text entwerfen kann, gibt es das mehrzeilige Textfeld mit Laufleiste.
So könnte dieses Texteingabefeld aussehen:
Hier steht der Text, der anfangs im Formularfeld stehen soll und vom Benutzer ergänzt oder auch überschrieben werden kann. Ein mehrzeiliges Textfeld kann einen ganzen Brief fassen. Verwenden Sie es für beliebige Texteingaben.

Schauen wir uns die Eigenschaften dieses Textfeldes an:
#########

Name:
Genau wie das einzeilige Textfeld und alle anderen Formularfelder auch benötigt auch dieses Textfeld zunächst mal einen Namen,.an dem der Formhändler oder der Mailempfänger es identifizieren kann. Geben Sie hier also ruhig einen treffeneren Namen ein als das von Namo WebEditor vorgegebene "formtextarea1", "formtextarea2" u.s.w. In diesem Beispiel würde dieses Textfeld die Nachricht enthalten. Also würde man es auf den Namen "Nachricht" taufen.

Anfänglicher Wert:
Mit dem anfänglichen Wert können Sie das Feld bereits vorab ausfüllen. Zweckmäßig ist das aber im Allgemeinen nicht.

Breite (Zeichen), Anzahl der Zeilen:
Wie beim Einzeiler können Sie auch meim mehrzeiligen Textfeld die Breite bestimmen. Und zwar in Zeichen und nicht in Pixeln. D.h. der Browser muss die richtige Breite in Abhängigkeit von der Buchstabengröße einstellen. Dafür zieht er ine Standardschrifteinstellung heran, so dass Sie nicht ganz genau wissen, wie breit das Feld beim Betrachter wirklich sein wird.
Die Anzahl der Zeilen gibt in etwa vor, wie hoch das Eingabefeld sein wird, vor allem gibt dieser Wert aber vor, wie viele Textzeilen im Feld angezeigt werden. Dies hat aber keinen Einfluss auf die Textmenge, die der Benutzer tatsächlich eingeben kann. Es kann mehr eingegeben werden, als in Textfeld passt. Was nicht ins Feld passt, wird gescrollt. Es gibt im Gegensatz zum Einzeiligen Textfeld auch keine Einstellung, mit der man festlegen könnte, wieviele Zeichen maximal in das Feld hineinpassen sollen. Theoretisch könnte man also unendlich viel in das Textfeld hinein tippen.

Hier der HTML-Code für ein Mehrzeiliges Textfeld:

<textarea name="formtextarea1" rows="8" cols="60">
Hier steht der Text, der anfangs im Formularfeld stehen soll und vom Benutzer ergänzt oder auch überschrieben werden kann.
Ein mehrzeiliges Textfeld kann einen ganzen Brief fassen.
Verwenden Sie es für beliebige Texteingaben oder auch universelles Adress-Eingabefeld.
</textarea>

Es fällt dabei auf, dass es keinen Wert (value) gibt. Den Anfangswert definiert man einfach als Text zwischen dem Tag <textarea> und dem Schlusstag </textarea>. Der Browser verwendet das dann einfach als Startwert und was immer der Benutzer daraus macht, wird zum Schluss übertragen.

Das Dropdown-Menü

Wenn der Benutzer nicht selbst schreiben soll, sondern nur zwischen diversen Alternativen auswählen soll, dann bietet sich das Dropdown-Menü an.
So könnte ein Dropdownmenü aussehen::
Werfen wir einen Blick auf die Eigenschaften dieses Dropdownmenüs:
Abbildung Formularfeldeigenschaften
Die Höhe des Menüs können Sie vorgeben. Das Aussehen des Menüs wird dadurch stark beeinflusst.
Beispiel 1, mit allen 5 Menüpunkten:entsteht .ein einfaches Auswahlmenü:
Mit Mehrfachauswahl - oder ohne Mehrfachauswahl
-
(Die Auswahl mehrerer Menüpunkte erfolgt, indem Sie die Taste [Strg] gedrückt halten, während Sie die Menüpunkte anklicken.)

Beispiel 2, Nur 3 von 5 Zeilen werden angezeigt, daher entsteht ein Auswahlmenü mit Scrollbalken:

Beispiel 3, Nur eine von 5 Zeilen wird angezeigt in einem Dropdown-Menü:

Beispiel 4, Ein Sonderfall: Dropdownmenü mit aktivierter Mehrfachauswahl:

Je nach Browser kann es ganz anders dargestellt werden. Selten so wie man das eigentlich geplant hatte... Kann es sein, dass sowohl MSIE als auch MozFox hier einen Bug haben?

Name und Anfänglicher Wert:
Da es sich um ein Auswahlfeldfeld handelt, aus dem der Benutzer sich eines oder auch mehrere aussuchen kann, muss man diese Auswahl in Form mehrerer Datensätze vorgeben. Jeder Datensatz bekommt einen eigenen Namen und einen Wert, damit man diese übertragen und später auch einzeln identifizieren kann. Also pro Auswahl ein Name und ein Wert. Der Name des Formularffeldes hingegen (in diesem Beispiel "formselect1" ist dann nicht mehr von Bedeutung. Jedenfalls nicht für den Anfänger. Schreiben Sie einfach "Auswahlfeld" oder belassen Sie es bei dem, was Namo WebEditor für Sie eingetragen hat.

In Namo WebEditor erzeugt man die Auswahlnamen und Werte, indem man in den Eigenschaften dieses Formularfeldes den Button [Hinzufügen] klickt. Daraufhin erscheint folgender Dialog:
#########
Der Name der Auswahl erscheint im Menü. Entsprechend aussagekräftig sollte dieser Text also sein. Wird er später vom Benutzer ausgewählt, dann wird er zusammen mit seinem Wert übertragen. Der Wert spielt dabei eigentlich keine große Rolle, da man die Auswahl ja schon allein am Namen erkennt, der übertragen wurde. Geben Sie daher einfach irgend einen Wert ein.
Des weiteren kann man hier vorgeben, dass diese Auswahl bereits ohne Zutun des Benutzers ausgewählt sein soll. Der Benutzer muss dann diese Auswahl ggf. erst abwählen, bzw. etwas anderes auswählen.

Durch mehrfaches Klicken auf [Hinzufügen] in der Formularfeldeigenschaften erstellt man die gewünschte Anzahl von Auswahlmöglichkeiten. Die Länge des Menüs ist dabei eigentlich unbegrenzt. Man sollte aber darauf achten, dass es zumindest noch auf den Bildschirm passt.

Die Breite des Menüs kann nicht bestimmt werden. Sie ergibt sich aus der größten Zeile im Menü - also aus der Länge des längsten Feldnamens.

Hier der HTML-Code für ein Dropdown-Menü wie im obigen Beispiel Nr. 3:

<select name="Dropdownmenu" size="1">
    <option value="1">Alternative Nummer 1</option>
    <option value="2">Alternative Nummer 2</option>
    <option value="3">Alternative Nummer 3</option>
    <option value="4">Alternative Nummer 4</option>
    <option value="5">Alternative Nummer 5</option>
</select>

Checkboxen und Radiobuttons

Oder Namo-deutsch: Kontrollkästchen und Optionsschaltflächen bilden eine hübsche Alternative zum Dropdownmenü. So könnte das zum Beispiel aussehen:

	Welches Brot wollen Sie?		Wählen Sie einen Belag!
	Graubrot		Marmelade
	Weißrot		Käse
	Brötchen		Wurst

Die quadratischen Kästchen, in denen bei Aktivierung ein Häkchen erscheint, heißen Checkboxen. Im allgemeinen gehören immer mehrere Checkboxen zu einer Gruppe und daher bekommen Sie alle den selben Namen. Als Wert nimmt man die Antwort. Im obigen Beispiel haben alle Checkboxen den Namen "Brotsorte". Und die Werte lauten auf "Graubrot", "Weißbrot" und "Brötchen". Namen und Werte von aktivierten Checkboxen werden übertragen. Es können mehrere Checkboxen der selben Gruppe aktiviert werden. Es gibt also die Möglichkeit einer Mehrfachauswahl.

Nicht so bei den Radiobuttons - so heißen die runden Schaltflächen, in denen ein Schwarzer Punkt erscheint, wenn man sie aktiviert. Sie verhalten sich wie die Sender-Auswahltasten an einem (alten) Radio. Aktiviert man einen, so wird ein anderer deaktiviert. Man kann also immer nur umschalten und somit nur einen Radiobutton pro Gruppe auswählen. Ansonsten ist es wie schon bei den Checkboxen. Die Radiobuttons einer Gruppe haben alle den selben Namen, während die Werte der Antwort entsprechen. Namen und Werte der aktivierten Radiobuttons werden übertragen. Will man die Mehrfachauswahl auch bei Radionbuttons erzwingen, dann verwendet man einfach unterschiedliche Formularfeldnamen.

Hier der typische HTML-Code:

<input type="checkbox" name="Brotsorte" value="Graubrot">
<input type="checkbox" name="Brotsorte" value="Weißbrot">
<input type="checkbox" name="Brotsorte" value="Brötchen">

<input type="radio" name="Brotbelag" value="Marmelade">
<input type="radio" name="Brotbelag" value="Käse">
<input type="radio" name="Brotbelag" value="Wurst">

Schaltflächen (Steuerbuttons)

Typ "Allgemein" bedeutet dabei irgend einen Button. Damit können Sie im Formular nichts anfangen. Das ist etwas für fortgeschrittene Webdesigner, die ´gern einen Button haben wollen, um mittels JavaScript irgend eine Aktion auszuführen. So etwas zum Beispiel:

Letztlich gibt es noch den Button "Zurücksetzen" oder "Formular löschen". Auch bei ihm ist Name und Wert von geringer Bedeutung. Er dient nur dem Zwecke, dass der Benutzer das Formular auf seine Ursprungswerte zurücksetzen kann. Es kommt auf das Formular und seinen Verwendungszweck an, ob man das braucht, oder es zumindest als praktisch empfindet. Meist nervt so ein Button aber, weil man garantiert daneben klickt und den Lösch-Button an Stelle des Absendebuttons erwischt...Daher auch hierzu ein Tipp: Weglassen, wenn er nicht wirklich benötigt wird. Oder mein zweiter Tipp: Prima Aprilscherz, wenn man die Beschriftung absichtlich vertauscht!...

Andere Anwendungen für Formularfelder

Formularfelder werden nicht nur als Eingabefelder gebraucht. Sie können auch als Ausgabefeld verwendet werden. Das findet seine Anwendung im Zusammenhang mit einer Datenbank. Aber auch der Anfänger kann diese Eigenschaft für seine Zwecke nutzen.

Zum Beispiel: Textfeld als praktisches Textausgabefeld mit Scrollbalken

Hier sehen Sie ein Textfeld, das ich 'missbraucht' habe, um Ihnen einen Ellenlangen Text vorzulegen. Dies könnte z.B. eine AGB oder das sonstige Kleingedruckte für irgend ein Onlinegeschäft sein. Es könnte sich auch um ein Stückchen HTML-Code handeln. Der Benutzer kann diesen Text bequem lesen, indem er den Scrollbalken verwendet. Er könnte den Text auch markieren und über die Windows-Ablage kopieren. Das ist sehr praktisch, wenn man nicht viel Platz hat oder auf die Schnelle einen Text mit Scrollbalken ausstatten will. Hier sehen Sie ein Textfeld, das ich misbraucht habe, um Ihnen einen Ellenlangen Text vorzulegen. Dies könnte z.B. eine AGB oder das sonstige Kleingedruckte für irgend ein Onlinegeschäft sein. Es könnte sich auch um ein Stückchen HTML-Code handeln. Der Benutzer kann dies bequem lesen, indem er den Scrollbalken verwendet. Er könnte den Text auch markieren und über die Windows-Ablage kopieren. Das ist sehr praktisch, wenn man nicht viel Platz hat oder auf die Schnelle einen Text mit Scrollbalken ausstatten will.
-

Der Nachteil bei einem solchen Textfeld ist, dass der Benutzer auch darin herumeditieren kann. Aber mit der Formularfunktion 'Zurücksetzen' kann man den Originaltext wiederherstellen. Probieren Sie es ruhig mal aus. Verwurschteln Sie den Text und dann klicken Sie auf den Button "Text Reparieren" (Zurücksetzen). Fortgeschrittene Webdesigner verwenden auch JavaScript, um z.B. den Text zu markieren. So kann man ein Stück Programmcode bequem weitergeben. Oder den markierten Text auch zum Drucker schicken.

Viel Spaß bei Formulareausfüllen.... .
- Nächstes und ganz besonders spezielles Web-Element: Frames

Seitenanfang || www.BuntesWeb.de - Startseite | Stichwortverzeichnis | Impressum

Copyright by Jörg Wischnewski - Logos, Warenzeichen, Schutzmarken etc. stehen im jeweiligen Recht und Eigentum der eingetragenen Inhaber, auch wenn dies nicht ausdrücklich einzeln angegeben ist.