Back to the very first page/zurück zur allerersten Seite

Formulare erstellen


Startseite
Homepage-Bastler
        
Grundlagen HTML Grafiken einfügen Tabellen Linksammlung
Javaspielereien I Javaspielereien II schwebende
Navigationsleiste
Frames Formulare
Beispielseite I Beispielseite II Beispielseite III Beispielseite IV Frame Beispielseite
Hintergründe Buttons Cliparts    

Formulare auf die eigenen Internetseiten zu bringen, ist einfacher als man glaubt. Bevor Sie sich nun den Quelltext dieser Seiten angucken, um ihn evtl. für Ihr Formular zu kopieren, sollten Sie etwas über die theoretischen Hintergründe erfahren (wirklich nur ganz kurz - Versprochen!)

Wenn ein Besucher Ihrer Seiten ein Formular vorfindet und auf 'Abschicken' klickt, gibt es zwei Möglichkeiten, wie es zu Ihnen als Webmaster gelangt:
  1. Es wird eine E-Mail aus dem Formular erzeugt und diese wird an Sie verschickt. Dazu ist es notwendig, dass der Surfer Ihrer Seiten auf seinem PC ein E-Mail-Programm installiert hat. In den meisten Fällen ist dies der Fall. Sollte ein Besucher Ihrer Seiten allerdings keine Programm zum Verschicken von E-mails installiert haben, so wird er bei Klicken auf den Absendebutton Ihres Formulars eine Fehlermeldung erhalten.

    Ein weiter Nachteil der Versendung des Formulars als E-mail ist, dass es keine Online-Rückmeldung gibt. Das heißt, es erscheint KEINE Meldung, dass das Formular verschickt wurde. Dies hat zur Folge, dass manche Besucher mehrmals auf Abschicken klicken, weil sie denken, es hat nicht geklappt.
  2. Eine weitere Möglichkeit, Ihr Formular zu verschicken, ist ein sogenanntes CGI-Script zu erzeugen. Das heißt, dass Ihr Formular nach dem Abschicken nicht direkt zu Ihnen nach Hause kommt, sondern erst einmal zu einem Server, den Sie vorher bestimmen, geschickt wird. Dort wird das Formular von der CGI-Programmierung in Empfang genommen, evtl. auf nicht ausgefüllte Felder geprüft und dann werden von dort aus zwei 'Mails' erzeugt. Eine Mail geht mit den Formulardaten an Sie als Webmaster. Eine zweite 'Mail' wird auf den Monitor des Besuchers Ihrer Seiten geschickt und zwar mit einem Inhalt, den Sie im Vorfeld bestimmt haben. Meistens ist es so etwas wie 'Vielen Dank für Ihre Mühe. Wir melden uns baldigst bei Ihnen'. Hierbei ist es völlig egal, ob der Besucher Ihrer Seiten, ein E-Mail-Programm installiert hat oder nicht.

    Der Nachteil dieser Versandart ist, dass Sie erst einmal einen Server finden müssen, der es ihnen erlaubt cgi-Scripte zu benutzen. Dann müssen Sie dieses cgi-Script auch noch programmieren (sollte man besser den Profis überlassen) oder jemand im Internet finden, der solche Scripte zur Verfügung stellt.
In jedem Fall sieht aber das Formular selbst immer gleich aus. Deswegen würde ich Ihnen empfehlen, erst einmal ein Formular zu erstellen, welches per E-mail verschickt wird. Wenn Sie dann später Zeit und Muße haben, sich um das cgi-Script zu kümmern, ist nur die Änderung einer einzigen Zeile im Formular nötig, um das Ganze umzustellen.

Die erste Zeile in jedem Formular lautet:

<form action="mailto:info@xyz.de" method="POST" enctype="text/plain">

Bei method steht hier Post, was bedeutet, es wird per E-mail versendet. Die E-mail-Adresse, an die es geschickt werden soll, steht davor (hier ist es info@xyz.de).

Das Formular endet immer mit den zwei Feldern 'submit', was 'abschicken' bedeutet und dem Feld 'reset', was 'alle Felder löschen' bedeutet. Die Befehle lauten:
<input type="SUBMIT" name="submit" value="Abschicken">
<input type="RESET" name="reset" value="alles löschen und neu anfangen">

Hier kann im 'value' das stehen, was Sie gerne möchten, allerdings ohne Zeilenumbruch.
Als letzter Befehl kommt der Endetag des Formulars </form>

Im unten stehenden Beispiel habe ich alle Formularfelder in eine Tabelle gesetzt, was jedoch nicht notwendig ist. Die Erklärung der einzelnen Felder steht jeweils unter dem Eingabefeld.
Name:
Dies ist ein einzeiliges Texteingabefeld, welches mit dem Befehl <input type="TEXT" name="Name" value="" size="40" maxlength="50"> erzeugt wird.

name="Name" gibt an, was in der Mail an Sie als Webmaster stehen soll. In diesem Fall würde in der Mail eine Liste erscheinen. In der ersten Zeile stände 'Name:' und dann das, was der Benutzer eingetragen hat.

maxlength="50" size="40" bedeutet einmal die maximale Anzahl an Zeichen, die der Benutzer eintippen darf und der andere Wert zeigt die Länge des weißen Feldes an. Das heisst, dass der Besucher mehr Zeichen eintippen kann, als er auf Anhieb sehen kann. Man kann aber mit den Pfeiltasten innerhalb des weißen Feldes scrollen, wenn mehr Buchstaben vorhanden sind.

Vorname:
E-Mail-Adresse:
Welche Hobbies haben Sie? Ich segele gerne
Ich tanze gerne
Ich lese gerne
Ich faulenze am liebsten
Ich habe keine Hobbies

Dies ist eine sogenannte Checkbox, bei der es möglich ist, mehrere Felder gleizeitig anzukreuzen. Der Befehl lautet <input type="CHECKBOX" name="Hobby" value="Segeln">.

name="Hobby" gibt an, was in der Mail an Sie als Webmaster stehen soll. In diesem Fall würde in der Mail eine Liste erscheinen. In einer der Zeilen stände 'Hobby:' und dann das, was der Benutzer eingetragen hat - in unserem Fall 'Segeln'.

value="Segeln" ist also der Begriff, der Ihnen zugeschickt wird, wenn der Besucher ihn ankreuzt.

WICHTIG: Damit man auch wirklich mehrere Felder ankreuzen kann, müssen alle diese Felder den gleichen 'name' haben, also alle name="Hobby".

Wie finden Sie dieses Internetprojekt?
Dies ist eine sogenanntes Dropdownfeld, bei der es möglich ist, aus einer herunter klappbaren Liste einen Wert auszuwählen. Der Befehl besteht aus folgenden Bestandteilen:
<select name="Homepagebeurteilung" size="1">
<option selected>sehr gut </option>
<option>gut </option>
</select>

name="Homepagebeurteilung" gibt an, was in der Mail an Sie als Webmaster stehen soll. In diesem Fall würde in der Mail eine Liste erscheinen. In einer der Zeilen stände 'Homepagebeurteilung:' und dann das, was der Benutzer ausgewählt hat.

size="1" besagt, dass jeweils nur eine Zeile des Ausklappmenüs zu sehen sein soll.

Wenn der Benutzer das Formular das erste Mal aufruft, ist in dem Ausklappmenü der Punkt bereits vorausgewählt, den Sie bestimmt haben - in unserem Falll ist das 'sehr gut'. Der Benutzer kann dies aber natürlich jederzeit ändern, bevor er das Formular abschickt.

Bitte ankreuzen: Ich bin ein Mann.
Ich bin eine Frau. Dies ist ein sogenannter Radiobutton, bei dem man nur eines von beiden Feldern ankeuzen kann. Der Befehl lautet <input type="RADIO" name="Geschlecht" checked value="männlich"">.

name="Geschlecht" gibt an, was in der Mail an Sie als Webmaster stehen soll. In diesem Fall würde in der Mail eine Liste erscheinen. In einer der Zeilen stände 'Geschlecht:' und dann das, was der Benutzer eingetragen hat - in unserem Fall 'männlich'.

Der Begriff 'männlich' ist heir durch das Wort 'checked' voreingestellt, kann aber natürlich durch den Besucher geändert werden.
WICHTIG: Damit man auch wirklich nur ein Feld ankreuzen kann, müssen alle angebotenen Felder den gleichen 'name' haben, also alle name="Geschlecht".

Wo wohnen Sie? in Norddeutschland
in Mitteldeutschland
in Ostdeutschland
in Süddeutschland
Ihr Kommentar
Dies ist ein mehrzeiliges Texteingabefeld, welches mit dem Befehl <textarea name="Kommentar" value="Kommentar des Kunden" rows="5" cols="30"> erzeugt wird.

name="Name" gibt an, was in der Mail an Sie als Webmaster stehen soll. In diesem Fall würde in der Mail eine Liste erscheinen. In einer der Listenzeilen stände 'Kommentar:' und dann das, was der Benutzer eingetragen hat.

rows="5" cols="30" bedeutet einmal die Anzahl der Zeilen (hier sind es 5) und Zeichen pro Zeile (hier sind es 30), die angezeigt werden. Der Besucher kann aber mehr Zeilen eintippen, als er auf Anhieb sehen kann. Man kann dann mit den Pfeiltasten innerhalb des weißen Feldes scrollen, wenn mehr Zeilen vorhanden sind.
WICHTIG: Im Gegensatz zu vielen anderen Formularfeldern muss die textarea mit einem Endetag versehen werden. Also </textarea>. Alles, was zwischen dem Anfangs- und Ende-Textarea-tag steht, erscheint im weißen Feld und kann vom Besucher gelöscht werden.