Kontakt per Formular zum Besucher meine Homepage Internetschule des Bürgernetz Pfaffenhofen

Links zu Kurs
	Kontakt zum Besucher per Formular meine Homepage

Inhaltsübersicht

Erstellung eines Formulares zur Abfrage der Personalien
Überprüfung der Formulareingaben per javascript (Validierung )
Weiterverarbeitung der Formulardaten
weitere Anbieter Form-Mailer
Testformular mit Skript-Verknüpfung zum Template

Erstellung eines Formulares zur Abfrage der Personalien

Allgemeines zu Formularen
Formular definieren

Beginn des Formulars mit
<form>
- Einzeilige Eingabefelder definieren
  - <input type="text" name="feldname">
- Textvorbelegung bei einzeiligen Eingabefeldern
  - <input type="text" name="feldname" value="vorbelegungstext">
- Eingabefelder für Paßwörter
  - <input type="password" name="feldname" value="geheim">
- Eingabefelder auf "nur lesen" setzen
  - <input type="text" name="feldname" readonly>
- Mehrzeilige Eingabefelder definieren
  - <textarea name="textfeldname" rows="2" cols="20"></textarea>
- Textvorbelegung bei mehrzeiligen Eingabefeldern
  - <textarea name="textfeldname">Dies ist der Text</textarea>
  - Dies ist der Text
- Umbruch bei mehrzeiligen Eingabefeldern kontrollieren
  - <textarea name="textfeldname" wrap=physical></textarea>
  - wrap=physical automatische Umbrüche während der Eingabe, werden später nach Absenden TATSÄCHLICH umgebrochen wrap=virtual (Standard-Einstellung) automatische Umbrüche während der Eingabe, werden später nach Absenden NICHT umgebrochenwrap=off während der Eingabe werden keine automatischen Umbrüche erstellt
- Auswahlliste definieren
  - <select name="listfeldname" size="1"><option>auswahl</option></select>
- Auswahlliste mit Mehrfachauswahl
  - <select name="feldname" multiple size="2">
    <option>auswahl 1</option>
    <option>auswahl 2</option>
    </select>
- Einträge vorselektieren
  - <select name="listfeldname" multiple size="2">
    <option>auswahl 1</option>
    <option selected>auswahl 2</option>
    </select>
- Absendewert von Einträgen bestimmen
  - <select name="listfeldname" multiple size="2">
    <option value="wert 1">auswahl 1</option>
    <option value="wert 2">auswahl 2</option>
    </select>
- Radiobuttons definieren
  - <input type="radio" value="JA" name="buttonname">ja
    <input type="radio" value="NEIN" name="buttonname">nein
  - ja nein
- Checkboxen definieren
  - blau grün
  - <input type="checkbox" name="checkboxname" value="BLAU">blau
    <input type="checkbox" name="checkboxname" value="GRUEN">grün
- Einträge vorselektieren
  - blau grün
  - <input type="checkbox" name="checkboxname" value="BLAU" checked >blau
    <input type="checkbox" name="checkboxname" value="GRUEN">grün
- Versteckte Elemente in Formularen definieren
  - <input type="hidden" name="feldname" value="vorbelegungstext">
- Buttons zum Absenden oder Abbrechen definieren
  - <input type="submit" value="Senden" name="sendbuttonname">
    <input type="reset" value="Löschen" name="sendbuttonname">
  - (versendet per CGI-Script)
- Grafische Buttons zum Absenden definieren
  - <input type="image" src="http://home.pfaffenhofen.de/demokrates
    /fotos/1998/linse/joerg4_.jpg" name="sendbuttonname">
  - ```
   (versendet per Email-Client)
```
```
Ende des Formulars mit
</form>
```

Testformular mit Skript-Verknüpfung zum Template

Email-Formular

Ihr Wunsch

.

Bitte hier Ihre Text-Nachricht eintragen
eine Kopie geht auch an Ihre eigene Email-Adresse


Funktion
Name:		Kontonummer:
Vorname:		BLZ:
Straße:		Termin
PLZ:		Geb.-Datum:
Ort:		Tel.:
Email-Adresse (unbedingt angeben)		Fax:

Bitte per Mausklick senden an
bnv216(at)pfaffenhofen.de

eine Kopie geht auch an Ihre eigene Email-Adresse

Formulareingaben überprüfen per javascript (Validierung )

Dazu ein fertiges Skript zum Anpassen

Weiterverarbeitung der Formulardaten

damit die eingegebenen Daten den Homepage-Autor erreichen, muß der Besucher das Formular absenden. Für den weiteren Transport gibt es im Prinzip 2 Lösungen:

1. als als E-Mail versandt
Die Formulardaten werden mit dem auf dem Besucher-PC installierten Email-Client verarbeitet

Hierzu muss das <form>-Steuerzeichen zu Formularbeginn modifiziert werden unter Angabe der Email-Adresse, wohin die Formulardaten versendet werden sollen:

<form method="POST" action="mailto:bnv216@pfaffenhofen.de" enctype="text/plain"

2. als Form-Mail versandt
Die Formulardaten werden mit dem einem Skript auf dem Webserver übernommen, verarbeitet

siehe Anleitung Formulare verarbeiten per CGI

Einen guten Formmailer bietet www.pair.com in seinen Accounts als System-CGI-Script cgiemail an. Der Autor muss in Ergänzung zu seinem Formular nur noch ein dazu passendes Template in schlichtem ASCII-Format als TXT-Datei layouten und dort die Namen der Formularfelder als [Übergabevariablen] in eckigen Klammern platzieren.

Für den Kurs habe ich ein Muster erstellt, und in einen Unterordner (fett) des Account hopfring eingestellt. Der Upload erfolgt per FTP:

http://www25.pair.com/hopfring/vhs/formular/platz00/kontakt.txt

ftp-server: vhs-bayrischzell.pair.com
benutzername: hopfring_vhs
kennwort: xxxxxxxxx

Der Prozess des CGI-Skripts (fetter Teil) wird aufgerufen und gleichzeitig verknüpft mit dem Template (kursiver Teil) durch Modifikation des <form>-Steuerzeichen mit folgender Erweiterung

<form action="http://www25.pair.com/cgi-sys/cgiemail/hopfring/vhs/formular/platz00/kontakt.txt" method="POST">

xxxxxxxxx: Kennwort auf Anfrage

weitere Form-Mailer Anbieter

Erstellt und Copyright von Jörg Bucher Arbeitskreis Internetschule
am 12.11.2000
seit dem 12.11.2000 Zugriffe