Der Formular-Editor

HTML-Help Projects verwaltet alle Formularelemente im Projektnavigator in der Liste Formularelemente.
Wenn Sie von den Besuchern Ihrer Seite bestimmte Informationen erhalten möchten, oder einfach Bestellungen entgegennehmen wollen, benötigen Sie ein Eingabeformular. Der Besucher Ihrer Seite kann darin Text in Eingabefeldern eingeben, aus Auswahllisten auswählen, Kontrollkästchen mit Optionen aktivieren etc..
Nach Beendigung der Eingaben betätigt der Anwender eine Schaltfläche, wodurch die soeben gemachten Einträge direkt an Sie gesendet werden.
Der Vorteil, den Sie gegenüber einer Antwort per normaler E-Mail haben ist, daß die Daten, die bei Ihnen ankommen immer das gleiche Format haben, und somit hervorragend in eine Datenbank eingelesen und verwaltet werden können.

Wo die Daten ankommen, also direkt bei Ihnen als E-Mail, oder auf Ihrem Server in eine Datenbank, können Sie selbst bestimmen. Am einfachsten ist der Empfang als E-Mail, denn hierzu müssen Sie nur die erstellte Seite in Ihren Bereich laden.

Für den Empfang in einer Datenbank auf Ihrem Server hingegen benötigen Sie ein Programm, welches das eingehende Formular speichert. (CGI-Script)

HTML-Help Projects bietet Ihnen eine Vielzahl von vorgefertigten Formularelementen, welche Sie nur noch an beliebiger Stelle in Ihre Seite einfügen müssen. Es können beliebig viele weitere Formularelemente angelegt werden.

Bitte beachten Sie folgendes beim Umgang mit Formularen:

1. Das erste Element muß von der Form "Action sein" dieses Element sagt dem Browser, wohin die fertige Eingabe gesendet werden soll.
2. Sie müssen auf jeden Fall eine Schaltfläche (Button) "Abschicken" definieren.
3. Sie können pro Seite ein Element nur einmal verwenden. Wollen Sie also z.B zwei Auswahllisten, dann definieren Sie im Editor auch zwei und geben diesen jeweils einen eigenen Namen.
4. Bevor Sie erstmals Formulare verwenden, rufen Sie bitte den Menüpunkt "Alle Formularelemente erstellen" auf. Siehe hierzu "Menüfunktionen Formular-Editor".

Natürlich können Sie alle Formularelemente auch in Verbindung mit Scriptsprachen verwenden.
Alle Formularelemente werden im Projektnavigator unter "Formularelemente" verwaltet:

Um ein Formularelement an der aktuellen Cursorposition einzufügen gibt es mehrere Möglichkeiten.

• Wählen Sie die Stelle, an der dieses eingefügt werden soll. Ziehen Sie mit der Maus das Formularelement aus dem Projektnavigator über den Editor und lassen Sie dort die Maustaste los.
• Wählen Sie die Stelle, an der ein Formularelement eingefügt werden soll. Wählen Sie aus dem Menü "Einfügen" den Menüpunkt "Formularelement", oder betätigen Sie F12. Der Projektnavigator ist jetzt aktiv. Wählen Sie mit den Pfeiltasten das Formularelement aus und betätigen Sie die Leertaste.
• Wählen Sie zunächst mit der Maus das Formularelement im Projektnavigator an. Klicken Sie dann auf die Stelle im Text, an der dieses eingefügt werden soll. Wählen Sie dann in der Toolbar den Button
  aus.

Zum ändern von Formularelementen im Editor wählen Sie diese durch Doppelklick an, oder bringen Sie den Cursor neben diese und betätigen "F4" (Eigenschaften).

HTML-Help Projects öffnet folgendes Fenster

Script:
Wie bereits erwähnt, können Sie zu allen Objekten ein Script anfügen. Der Scripttext wird direkt in die HTML-Formatierung eingefügt und auch angezeigt.
Um ein Script hinzuzufügen, ziehen Sie dieses aus dem Navigator in das Feld "Script".

Oder:

1. betätigen Sie wenn der Cursor im Feld "Script" steht die Taste F4
2. wählen Sie das neue Script in der Liste an
3. betätigen Sie die Leertaste

Nicht in Web-Seite / Nicht in HTML-Hilfe:
Sie können wählen, ob der Verweis auf der Web-Seite oder in der HTML-Hilfe nicht
erscheinen soll. Das Wort selbst wird immer eingebunden.

HTML-Code:
HTML-Help Projects zeigt Ihnen hier genau den HTML-Code an der später in die Seite eingefügt wird. Der HTML-Code setzt sich aus der Formatierung für das Formularelement, und dem angefügten Script zusammen. Wenn Sie das Formularelement ändern, ändert sich sofort der HTML-Code.

HTML-Code nicht ändern:
Wählt den Direkt-HTML Modus. Der HTML-Code wird nicht mehr verändert, bzw. kann manuell eingegeben werden.

Um ein Formularelement in Ihre Seiten einfügen zu können, müssen Sie dieses erstellen. Eine neues Formularelement legen Sie an, indem Sie bei aktiviertem Projektnavigator die Liste Formularelement auswählen und anschließend im Menü Bearbeiten "Neues Formularelement" wählen.

Bestätigen Sie Ihre Eingabe mit "OK". Sie finden den neuen Eintrag in der Auswahlliste. Über F4 erreichen Sei die Eigenschaften zum Formularelement.

Script:
Zu jedem Formularelement können Sie ein Script anfügen. Der Scripttext wird direkt in die HTML-Formatierung eingefügt und auch angezeigt.
Um ein Script hinzuzufügen, ziehen Sie dieses aus dem Navigator in das Feld "Script".

Oder

1. Betätigen Sie wenn der Cursor im Feld "Script" steht die Taste F4
2. wählen Sie das Script in der Liste an
3. betätigen Sie die Leertaste

Im einfachsten Fall könnte das Script hier eine id für das Formularelement enthalten.

HTML-Code:
HTML-Help Projects zeigt Ihnen hier genau den HTML-Code an der später in die Seite eingefügt wird. Der HTML-Code setzt sich aus der Formatierung für das Formularelement, und dem angefügten Script zusammen. Wenn Sie das Formularelement ändern, ändert sich sofort der HTML-Code.

Dieses Element muß stets das erste auf einer Seite mit Formularelementen sein.
Mit der Action Methode legen Sie fest, auf welche Weise das Formular versendet wird.

Methode:
Geben Sie die Methode an, mit der die Formulardaten an den Server-Rechner übermittelt werden. Üblich sind hier die Angaben method=post oder method=get. Wenn Sie sich vom Anwender ausgefüllte Formulare als E-Mail zusenden lassen, notieren Sie hier method=post.

Sollten Sie die Antwort über ein CGI-Script verarbeiten wollen, können Sie sowohl "Post" als auch "Get" anwählen. Der Unterschied besteht dann darin, das bei Post die Antwort über die Befehlszeile beim Programmstart übergeben wird, bei "Get" erfolgt die Übergabe der Daten über eine Variable.

Achtung!! Speichern Sie Änderungen die Sie vornehmen stets mit "Übernehmen" ab.

Zur Text und Zahleneingabe gibt es das Eingabefeld.

Maximale Textlänge:
Hier tragen Sie die maximale Anzahl von Zeichen ein, die dieses Feld aufnehmen darf. Orientieren Sie sich hier an der Größe des Datenbankfeldes, sofern Sie die Daten in eine Datenbank übernehmen wollen.

Inhalt:
Sie können das Feld hier bereits mit einem
Text vorbelegen.

Text; Datum..
Wählen Sie hier die Art der Information, die in diesem Feld eingegeben werden soll an. Der Browser sollte bei Angabe falscher Daten mit einer entsprechenden Fehlermeldung den Benutzer darauf hinweisen.

Achtung!! Speichern Sie Änderungen die Sie vornehmen stets mit "Übernehmen" ab.

Zur Texteingabe über mehrere Zeilen gibt es die Textarea.

Anzahl der Reihen
Mit diesem Wert bestimmen Sie die sichtbare Höhe des Textfeldes in Zeilen. Das Textfeld kann mehr Zeilen aufnehmen als hier vorgegeben. .

Ihre Textarea
Sie können hier beliebige Textvorgaben eingeben.

Achtung!! Speichern Sie Änderungen die Sie vornehmen stets mit "Übernehmen" ab.

Zur Auswahl von vorgegebenen Daten.

Angewählter Eintrag:
Legen Sie hier den vorgewählten Eintrag der Liste fest. Mit 0 ist der erste Eintrag, mit 1 der zweite usw. beim aufrufen der Seite angewählt. Das heißt, wenn der Benutzer hier keine Angabe macht, wird dieser Wert übertragen.

Mehrfachauswahl:
Haben Sie diese Option angewählt, dann kann der Anwender mehrere Einträge auswählen.

Hinzufügen:
Tragen Sie hier einen neuen Listeneintrag ein und betätigen Sie die Eingabetaste, um diesen der Liste hinzuzufügen.

Löschen:
Wählen Sie den zu löschenden eintrag in der Liste an und betätigen Sie die entfernen Taste.

Achtung!! Speichern Sie Änderungen die Sie vornehmen stets mit "Übernehmen" ab.

Zur Optionswahl, Abschicken, Verwerfen etc.

Radio:
Ein Button einer Gruppe, von welchen immer nur einer angewählt sein kann. Legen Sie für die Gruppe einen Gruppennamen fest, und geben Sie allen zugehörenden Buttons den selben Namen.

Check:
Ein Button einer Gruppe, von welchen einer, keiner oder mehrere angewählt sein können. Legen Sie für die Gruppe einen Gruppennamen fest, und geben Sie allen zugehörenden Buttons den selben Namen.

Button (Java):
Ein Button ohne Funktion, der in Verbindung mit Java frei verwendet werden kann.

Abschicken:
Jede Seite mit Formularelementen muß diesen Button enthalten. Nach Anwahl wird das Formular an die in der "Action"-Methode festgelegte Adresse geschickt.

Verwerfen:
Alle vom Benutzer vorgenommenen Einträge werden gelöscht.

Achtung!! Speichern Sie Änderungen die Sie vornehmen stets mit "Übernehmen" ab.

Script löschen:
Das dem Formularelement zugewiesene Script wird entfernt. Sie können dieses ebenfalls löschen, indem Sie einen Doppelklick auf das Feld Script ausführen, oder die entfernen Taste betätigen.

Alle Formularelemente erstellen:
HTML-Help Projects erstellt anhand der Einträge in der Formulardatenbank die zugehörigen Grafikdateien, die zur Darstellung im Editor benötigt werden.

Der Formular-Editor beinhaltet alle Funktionen, um normale Formulare für Ihre Web-Site zu erstellen.
Wenn Sie z.B. Formularelemente in Verbindung mit Java einfügen wollen, haben Sie folgende Möglichkeiten.

1. Erstellen Sie ein Script, oder laden eines aus den Script-Stammdaten. Sie finden dort weitere spezielle Formularelemente unter "HTML-Formulare"
2. Erweitern Sie Formulare im Formular-Editor durch hinzufügen eines Scripts.
   

Beispiel:

Wir benötigen einen Button der die Hintergrundfarbe des Dokuments ändern soll.

Lösung 1: Wir erstellen ein Script, dass die komplette Funktion enthält.

• Wählen Sie im Projektnavigator die Liste Script an und mit der rechten Maustaste "Neues Script".
• Tragen Sie im Dialog einen Namen ein.
• Im Scripteditor den Reiter "HTML-Script" wählen.
• Im Textfeld "Eintrag im HTML-Text" folgendes Script eintragen
  <form><input type=button value="Farbe ändern" name="testbutt" onclick="document.bgColor='red'"></form>
• Das Script mit Übernehmen speichern. (Später können Sie noch einen anderen Platzhalter durch ein Bildschirmfoto erstellen)
• Ziehen Sie das Script auf irgend eine Seite und lassen Sie mit eine Vorschau erstellen.
• Testen Sie den Button. Die Hintergrundfarbe der Seite wechselt auf rot.

Das Script kann nun noch dahingehend geändert werden, dass z.B. die Farbe im Scripteditor gewählt werden kann.

• Hierzu das Wort "red" Markieren
• im Menü Einfügen-FeldHTML-Farbauswahl wählen.Das Script sieht nun wie folgt aus.
  <form><input type=button value="Farbe ändern" name="testbutt" onclick="document.bgColor='<#c>Bitte Farbe wählen<##>'"></form>
• den Reiter "Allgemein" anwählen.
• die Liste "Einstellungen zum Script" über die rechte Maustaste und "Reset Liste" neu initialisieren.
  

In der Liste erscheint nun der Hinweis Farbe wählen, es wird bereits eine Farbe angezeigt und vermutlich eine Zahl. Da unser Script mit Farbnamen arbeiten soll, wählen wir das Farbfeld mit der rechten Maustaste an und wählen Farbformat-HTMLName. Die Farbe kann nun durch Doppelklick auf das Farbfeld ausgewählt werden.

Lösung 2: Über Formular-Editor mit Script.

• Wählen Sie im Projektnavigator die Liste Formulare und mit der rechten Maustaste "Neues Formularelement".
• Tragen Sie im Dialog einen Namen ein.
• Im Formulareditor den Reiter "Buttons" wählen.
• Einstellung auf "Java-Button" vornehmen.
• Im Feld Beschriftung z.B. "Farbe ändern" eintragen. Wir benötigen keinen Gruppennamen.
• Das Formularelement mit Übernehmen speichern.
  

Der im Formulareditor angezeigte HTML-Code sieht nun wie folgt aus

<form><input type=button value="Farbe ändern"></form>

Um nun den Namen und die onclick Aktion hinzuzufügen, erstellen wir ein Script, das nur die im folgenden grün markierten fehlenden Daten enthält.

<form><input type=button value="Farbe ändern" name="testbutt" onclick="document.bgColor='red'"></form>

• Wählen Sie im Projektnavigator die Liste Script an und mit der rechten Maustaste "Neues Script".
• Tragen Sie im Dialog einen Namen ein z.B Farbauswahl.
• Im Scripteditor den Reiter "HTML-Script" wählen.
• Im Textfeld "Eintrag im HTML-Text" folgendes Script eintragen
  name="testbutt" onclick="document.bgColor='red'"
• Das Script mit Übernehmen speichern. (Wir benötigen hier keinen speziellen Platzhalter, da dieses Script alleine keine Funktion hat und deshalb nie alleine in den Editor eingefügt wird, sondern immer nur in Objekte.)
• Öffnen Sie nun wieder den Formulareditor mit oben erstelltem Java-Button.
• ziehen Sie das soeben erstellte Script in das Feld "Script".
• Das Formularelement mit Übernehmen speichern.

Der im Formulareditor angezeigte HTML-Code sieht nun wie gewünscht aus.

<form><input type=button value="Farbe ändern" name="testbutt" onclick="document.bgColor='red'"></form>

• Ziehen Sie das Formularelement nun auf irgend eine Seite und lassen Sie mit eine Vorschau erstellen.
• Testen Sie den Button. Die Hintergrundfarbe der Seite wechselt auf rot.

Das Script kann nun wie oben erwähnt noch optimiert werden, damit die Farbeinstellung leicht vorgenommen werden kann.

Dieses Script enthält nun einen Namen und die Funktion onclick.... dies kann z.B auch einer Grafik zugewiesen werden.

• Fügen Sie in irgend einer Seite eine beliebige Grafik ein.
• öffnen Sie durch Doppelklick auf diese den Eigenschaften-Dialog.
• Ziehen Sie das soeben erstellte Script in das Feld "Script im Image Tag".
• lassen Sie mit eine Vorschau erstellen.
• Testen Sie die Funktion, indem Sie die Grafik anklicken. Die Hintergrundfarbe der Seite wechselt auf rot.