Webformulare erstellen

In der Entwurfsansicht sind Formulare durch einen rot gepunkteten Rahmen gekennzeichnet. Wenn der Rahmen nicht sichtbar ist, wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“.

Legen Sie die Eigenschaften des HTML-Formulars im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) fest:

a) Klicken Sie im Dokumentfenster auf den Formularrahmen, um das Formular auszuwählen.

b) Geben Sie im Feld „Formularname“ einen eindeutigen Namen für das Formular ein.

Wenn Sie ein Formular benennen, können Sie es mit einer Skriptsprache, wie z. B. JavaScript oder VBScript, steuern oder darauf verweisen. Wenn Sie dem Formular keinen Namen geben, erzeugt Dreamweaver anhand der Syntax formn einen Namen und erhöht den Wert von n bei jedem der Seite hinzugefügten Formular.

c) Geben Sie im Feld „Aktion“ die Seite oder das Skript zur Verarbeitung der Formulardaten an. Geben Sie entweder den Pfad ein oder klicken Sie auf das Ordnersymbol, um zur gewünschten Seite bzw. zum gewünschten Skript zu navigieren. Beispiel: processorder.php.

d) Legen Sie im Popupmenü „Methode“ die Methode fest, die zum Übertragen der Formulardaten zum Server verwendet werden soll.

Wählen Sie eine der folgenden Optionen:

Standard verwendet zum Senden der Formulardaten an den Server die Standardeinstellung des Browsers. Die Standardeinstellung ist normalerweise die Methode GET.

GET hängt den Wert an die URL an, welche die Seite anfordert.

POST bettet die Formulardaten in die HTTP-Anforderung ein.

Verwenden Sie die Methode GET nicht zum Senden langer Formulare. URLs dürfen maximal 8192 Zeichen lang sein. Falls die Menge der gesendeten Daten zu groß ist, werden Daten abgeschnitten, wodurch unerwartete oder fehlerhafte Verarbeitungsergebnisse entstehen.

Dynamische Seiten, die von den Parametern der Methode GET generiert werden, können mit einem Lesezeichen versehen werden, da die URL in der Adresszeile des Browsers alle Werte enthält, die zu einem erneuten Aufbau der Seite benötigt werden. Für Lesezeichen ungeeignet sind dynamische Seiten, die aus den Parametern der Methode POST erzeugt werden.

Wenn Sie vertrauliche Benutzernamen und Kennwörter, Kreditkartennummern und andere vertrauliche Informationen erfassen, mag die Methode POST sicherer als die Methode GET erscheinen. Allerdings sind die Daten, die mit der Methode POST gesendet werden, unverschlüsselt und können von einem Hacker ohne großen Aufwand mitgelesen werden. Wenn es auf Sicherheit ankommt, sollten Sie unbedingt eine sichere Verbindung zu einem sicheren Server einsetzen.

e) Optional: Legen Sie im Popupmenü „Kod.-Typ“ den MIME-Kodierungstyp der Daten fest, die zur Verarbeitung an den Server gesendet werden.

Die Standardeinstellung für application/x-www-form-urlencode ist üblicherweise die Methode POST . Wenn Sie ein Feld zum Übertragen einer Datei erstellen, geben Sie multipart/form‑data als MIME-Typ an.

f) Optional: Geben Sie im Popupmenü „Ziel“ das Fenster an, in welchem die vom aufgerufenen Programm zurückgegebenen Daten angezeigt werden sollen.

Wenn das angegebene Fenster nicht bereits geöffnet ist, wird ein neues Fenster mit diesem Namen geöffnet. Wählen Sie einen der folgenden Zielwerte:

_blank öffnet das Zieldokument in einem neuen, unbenannten Fenster.

_parent öffnet das Zieldokument im übergeordneten Fenster des Fensters, in dem das aktuelle Dokument angezeigt wird.

_self öffnet das Zieldokument in dem Fenster, in welchem das Formular abgeschickt wurde.

_top öffnet das Zieldokument im Hauptteil des aktuellen Fensters. Mit diesem Wert lässt sich sicherstellen, dass das Zieldokument das gesamte Fenster einnimmt, auch wenn das ursprüngliche Dokument in einem Rahmen angezeigt wurde.

Fügen Sie Formularobjekte auf der Seite ein:

a) Setzen Sie die Einfügemarke an die Stelle im Formular, an welcher das Formularobjekt stehen soll.

b) Wählen Sie das Objekt unter „Einfügen“ > „Formular“ oder in der Kategorie „Formulare“ des Bedienfelds „Einfügen“ aus.

c) Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus. Weitere Informationen erhalten Sie auch, wenn Sie im Dialogfeld auf die Hilfeschaltfläche klicken.

d) Legen Sie die Eigenschaften der Objekte fest.

e) Geben Sie im Eigenschafteninspektor einen Namen für das Objekt ein.

Alle Objekte des Typs „Textfeld“, „verstecktes Feld“, „Kontrollkästchen“ und „Liste/Menü“ müssen einen eindeutigen Namen haben, anhand dessen sich diese Objekte im Formular identifizieren lassen. Namen von Formularobjekten dürfen weder Leerzeichen noch Sonderzeichen enthalten. Alphanumerische Zeichen und der Unterstrich (_) können in beliebiger Kombination verwendet werden. Die Beschriftung, die Sie dem Objekt zuweisen, ist der Variablenname, unter welchem der Wert (die eingegebenen Daten) des Feldes gespeichert wird. Dies ist der Wert, der zur Verarbeitung an den Server gesendet wird.

f) Wenn Sie das Textfeld, das Kontrollkästchen oder den Optionsschalter auf der Seite beschriften möchten, klicken Sie neben dem Objekt und geben Sie die Beschriftung ein.

Zur Gestaltung Ihrer Formulare können Sie Zeilenumbrüche, Absatzumbrüche, vorformatierten Text und Tabellen einsetzen. Sie können ein Formular nicht in ein anderes Formular einfügen (d. h. die Tags dürfen sich nicht überschneiden). Eine Seite kann aber mehrere Formulare enthalten.

Achten Sie bei der Gestaltung von Formularen darauf, den Formularfeldern eine eindeutige Beschreibung zu geben. Dann wissen die Besucher, was von ihnen erwartet wird. Geben Sie beispielsweise „Bitte Namen eingeben“ an, wenn ein Besucher seinen Namen eingeben soll.

Mit Tabellen können Sie Formularobjekten und Feldbeschriftungen eine Struktur verleihen. Achten Sie bei der Verwendung von Tabellen in Formularen darauf, dass sich alle table-Tags innerhalb der form-Tags befinden.

legt den Namen des Dateifeldobjekts fest.

gibt an, wie viele Zeichen maximal im Feld angezeigt werden können.

legt fest, wie viele Zeichen das Feld maximal enthalten kann. Falls der Benutzer die Datei über „Durchsuchen“ auswählt, können Dateiname und Pfad den in „Zeichen max.“ angegebenen Wert überschreiten. Falls der Benutzer jedoch den Dateinamen und den Pfad manuell eingibt, kann das Feld nur die in „Zeichen max.“ festgelegte Anzahl an Zeichen enthalten.

Nun wird das Dialogfeld „Bildquelle auswählen“ angezeigt.

weist der Schaltfläche einen Namen zu. Zwei Namen sind bereits belegt: „Senden“ und „Zurücksetzen“. Mit „Senden“ wird das Formular angewiesen, die Formulardaten an die verarbeitende Anwendung bzw. das verarbeitende Skript zu senden. Mit „Zurücksetzen“ werden alle Formularfelder auf ihre Ausgangswerte zurückgesetzt.

gibt das Bild an, das Sie für die Schaltfläche verwenden möchten.

ermöglicht die Eingabe von beschreibendem Text, der angezeigt wird, wenn das Bild nicht in den Browser geladen werden kann.

stellt das Attribut „align“ des Objekts ein.

startet den Standardeditor für Bilder und öffnet die Bilddatei zur Bearbeitung.

ermöglicht das Definieren von CSS-Regeln für das Objekt.

Wählen Sie „Einfügen“ > „Formular“ > „Optionsschaltergruppe“.

Nehmen Sie im Dialogfeld die gewünschten Einstellungen vor und klicken Sie auf „OK“.

a) Geben Sie im Feld „Name“ einen Namen für die Optionsschaltergruppe ein.

 Wenn Sie angeben, dass die Optionsschalter Parameter zurück an den Server übergeben sollen, werden die Parameter mit dem Namen verknüpft. Wenn Sie beispielsweise die Gruppe myGroup nennen und GET als Formularmethode festlegen (d. h., das Formular soll URL-Parameter und keine Formularparameter übergeben, wenn der Benutzer auf die Schaltfläche zum Senden klickt), wird in der URL der Ausdruck myGroup="CheckedValue" an den Server übermittelt.

b) Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um der Gruppe einen Optionsschalter hinzuzufügen. Geben Sie für den neuen Schalter eine Beschriftung und einen aktivierten Wert an.

c) Klicken Sie auf den Aufwärts- oder Abwärtspfeil, um die Reihenfolge der Schalter zu ändern.

d) Wenn beim Öffnen der Seite in einem Browser ein bestimmter Optionsschalter ausgewählt sein soll, geben Sie den Wert ein, der dem Optionsschalterwert im Feld „Wert auswählen, der gleich“ entspricht.

Geben Sie einen statischen Wert ein oder legen Sie einen dynamischen Wert fest, indem Sie neben dem Feld auf das Blitzsymbol klicken und eine Datensatzgruppe auswählen, die mögliche Aktivierungswerte enthält. In beiden Fällen sollte der angegebene Wert dem aktivierten Wert eines Optionsschalters in der Gruppe entsprechen. Um die aktivierten Werte der Optionsschalter anzuzeigen, wählen Sie den jeweiligen Optionsschalter aus und öffnen Sie seinen Eigenschafteninspektor („Fenster“ > „Eigenschaften“).

e) Wählen Sie das Format aus, in dem Dreamweaver die Schalter anordnen soll. Die Schalter können mithilfe von Zeilenumbrüchen oder Tabellen angeordnet werden. Wenn Sie sich für eine Tabelle entscheiden, erstellt Dreamweaver eine einspaltige Tabelle und platziert die Optionsschalter links und die Beschriftungen rechts.

Sie können die Eigenschaften auch im Eigenschafteninspektor oder direkt in der Codeansicht festlegen.

Wählen Sie „Einfügen“ > „Formular“ > „Kontrollkästchengruppe“.

Nehmen Sie im Dialogfeld die gewünschten Einstellungen vor und klicken Sie auf „OK“.

a) Geben Sie im Feld „Name“ einen Namen für die Kontrollkästchengruppe ein.

Wenn Sie für die Kontrollkästchen festlegen, dass Parameter an den Server zurückgegeben werden, erfolgt eine Zuordnung der Parameter zum entsprechenden Namen. Wenn Sie beispielsweise die Gruppe myGroup nennen und GET als Formularmethode festlegen (d. h., das Formular soll URL-Parameter und keine Formularparameter übergeben, wenn der Benutzer auf die Schaltfläche zum Senden klickt), wird in der URL der Ausdruck myGroup="CheckedValue" an den Server übermittelt.

b) Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um der Gruppe ein Kontrollkästchen hinzuzufügen. Geben Sie für das neue Kontrollkästchen eine Beschriftung ein und legen Sie fest, ob es aktiviert ist.

c) Klicken Sie auf den entsprechenden Pfeil nach oben oder unten, um die Reihenfolge der Kontrollkästchen zu ändern.

d) Wenn beim Öffnen der Seite in einem Browser ein bestimmtes Kontrollkästchen aktiviert sein soll, geben Sie im Feld „Wert auswählen, der gleich:“ einen Wert ein, der dem Wert des Kontrollkästchens entspricht.

Geben Sie einen statischen Wert ein oder legen Sie einen dynamischen Wert fest, indem Sie neben dem Feld auf das Blitzsymbol klicken und eine Datensatzgruppe auswählen, die mögliche Aktivierungswerte enthält. In beiden Fällen sollte der angegebene Wert dem Aktivierungswert eines Kontrollkästchens in der Gruppe entsprechen. Um die Aktivierungswerte der Kontrollkästchen anzuzeigen, wählen Sie die einzelnen Kontrollkästchen und öffnen Sie jeweils den entsprechenden Eigenschafteninspektor („Fenster“ > „Eigenschaften“).

e) Wählen Sie das Format aus, in dem Dreamweaver die Kontrollkästchen anordnen soll.

Die Kontrollkästchen können mithilfe von Zeilenumbrüchen oder Tabellen angeordnet werden. Wenn Sie sich für eine Tabelle entscheiden, erstellt Dreamweaver eine einspaltige Tabelle und platziert die Kontrollkästchen links und die Beschriftungen rechts.

Sie können die Eigenschaften auch im Eigenschafteninspektor oder direkt in der Codeansicht festlegen.

Fügen Sie ein Liste/Menü-HTML-Formularobjekt in Ihre Seite ein:

    a) Klicken Sie in das HTML-Formular auf der Seite („Einfügen“ > „Formular“ > „Formular“).

    b) Wählen Sie „Einfügen“ > „Formular“ > „Liste/Menü“ aus, um das Formularobjekt einzufügen.

Führen Sie einen der folgenden Schritte aus:

• Wählen Sie ein neues oder vorhandenes HTML Liste/Menü-Formularobjekt aus und klicken Sie anschließend im Eigenschafteninspektor auf die Schaltfläche „Dynamisch“.

• Wählen Sie „Einfügen“ > „Datenobjekte“ > „Dynamische Daten“ > „Dynamische Auswahlliste“ aus.

Nehmen Sie im Dialogfeld „Dynamische(s) Liste/Menü“ die gewünschten Einstellungen vor und klicken Sie auf „OK“.

  a) Wählen Sie im Popupmenü „Optionen aus Datensatzgruppe“ die Datensatzgruppe aus, die als Inhaltsquelle dienen soll. Mit diesem Menü können Sie später auch statische und dynamische Liste/Menü-Elemente bearbeiten.

  b) Geben Sie im Bereich „Statische Optionen“ ein Standardelement in die Liste bzw. das Menü ein. Mit dieser Option können Sie auch statische Einträge in einem Liste/Menü-Formularobjekt bearbeiten, nachdem dynamischer Inhalt hinzugefügt wurde.

  c) Optional: Mithilfe der Schaltfläche mit dem Pluszeichen (+) bzw. dem Minuszeichen (–) können Sie Elemente in die Liste einfügen oder aus der Liste entfernen. Die Elemente werden in derselben Reihenfolge aufgeführt wie im Dialogfeld „Listenwerte“. Das erste in der Liste aufgeführte Element wird ausgewählt, wenn die Seite in einem Browser geladen wird. Mit den nach oben und nach unten gerichteten Pfeilen können Sie die Elemente der Liste neu anordnen.

  d) Wählen Sie im Popupmenü „Werte“ das Feld aus, das die Werte für die Menüelemente enthält.

  e) Wählen Sie im Popupmenü „Beschriftungen“ das Feld aus, das die Beschriftungen für die Menüelemente enthält.

  f) Optional: Soll ein bestimmtes Menüelement ausgewählt sein, wenn die Seite in einem Browser geöffnet oder ein Datensatz im Formular angezeigt wird, geben Sie im Feld „Wert auswählen, der gleich“ einen Wert ein, der mit dem Menüelementwert übereinstimmt.

    Sie können einen statischen Wert eingeben oder Sie können neben dem Feld auf das Blitzsymbol klicken und aus der Liste der Datenquellen einen dynamischen Wert auswählen. In beiden Fällen muss der angegebene Wert mit einem der Menüelementwerte übereinstimmen.

Die Datenquelle muss Informationen in Textform enthalten. Falls in der Liste keine Datenquellen enthalten sind oder die vorhandenen Datenquellen nicht Ihren Bedürfnissen entsprechen, klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um eine neue Datenquelle zu definieren.

• Klicken Sie neben dem Textfeld „Markieren wenn“ auf die Schaltfläche mit dem Blitzsymbol und wählen Sie das Feld in der Liste der Datenquellen aus.

  Die Datenquelle muss boolesche Daten wie Ja und Nein bzw. wahr und falssch enthalten. Falls in der Liste keine Datenquellen enthalten sind oder die vorhandenen Datenquellen nicht Ihren Bedürfnissen entsprechen, klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um eine neue Datenquelle zu definieren.

• Geben Sie im Textfeld „Gleich“ den Wert ein, den das Feld haben muss, damit das Kontrollkästchen aktiviert wird.

  Soll beispielsweise das Kontrollkästchen aktiviert werden, wenn ein bestimmtes Feld in einem Datensatz den Wert Ja hat, geben Sie im Textfeld „Gleich“ den Wert Ja ein.

Im Feld „Optionsschalterwerte“ werden die Werte aller Optionsschalter der Gruppe aufgeführt.

Die ausgewählte Datensatzgruppe enthält Werte, die den aktivierten Werten der Optionsschalter entsprechen. Um die aktivierten Werte der Optionsschalter anzuzeigen, wählen Sie den jeweiligen Optionsschalter aus und öffnen Sie seinen Eigenschafteninspektor („Fenster“ > „Eigenschaften“).

Nehmen Sie im Dialogfeld „Dynamische Daten“ die gewünschten Einstellungen vor und klicken Sie auf „OK“.

  a) Wählen Sie in der Liste der Datenquellen eine Datenquelle aus.

  b) Optional: Wählen Sie ein Datenformat für den Text aus.

  c) Optional: Ändern Sie den Code, den Dreamweaver in die Seite einfügt, sodass der dynamische Text angezeigt wird.

Achten Sie darauf, dass jedes Textfeld, das überprüft werden soll, einen eindeutigen Namen hat.

Sie können zum Beispiel festlegen, dass ein Textfeld, in dem das Alter eines Besuchers eingetragen werden soll, nur Zahlen annimmt.

Sie können auch den Namen einer noch nicht vorhandenen Funktion eingeben, beispielsweise processMyForm().

Beispielsweise können Sie im Abschnitt head die folgende JavaScript-Funktion hinzufügen, die eine Meldung einblendet, wenn der Benutzer auf die Senden-Schaltfläche klickt:

Diesen Schritt müssen Sie nur einmal ausführen.

Das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ wird eingeblendet.

weist dem Formularfeld eine ID zu. Dieser Wert kann in JavaScript für Verweise auf das Feld verwendet werden. Er wird außerdem als Wert für das for-Attribut verwendet, wenn Sie in den Stiloptionen die Option „Label-Tag mit for-Attribut anhängen“ wählen.

bewirkt, dass das Formularobjekt wie folgt in Label-Tags eingeschlossen wird:

Mithilfe des for-Attributs wird das Formularelement in Label-Tags eingeschlossen:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

Die Auswahl dieser Option bewirkt, dass der mit einem Kontrollkästchen oder Optionsschalter verbundene Text im Browser in einem Fokusrechteck angezeigt wird. Der Benutzer kann dann auf eine beliebige Stelle in diesem Text klicken und muss nicht unbedingt genau auf das Kontrollkästchen oder den Optionsschalter klicken.

Hinweis: Diese Möglichkeit empfiehlt sich als Eingabehilfe. Die Funktionalität kann jedoch je nach Browser variieren.

bewirkt, dass kein Label-Tag verwendet wird:

bewirkt, dass das Formularobjekt im Browser über eine Taste (einen Buchstaben) und die Alt-Taste (Windows) bzw. Ctrl (Mac) ausgewählt werden kann. Wenn Sie beispielsweise B als Zugriffstaste definieren, können Macintosh-Benutzer das Formularobjekt im Browser mit Ctrl+B auswählen.

gibt eine Tabulatorreihenfolge für die Formularobjekte an. Wenn Sie für ein Objekt eine Reihenfolgenposition festlegen, müssen Sie dies auch bei allen anderen Objekten tun.

Das Festlegen einer Reihenfolge ist sinnvoll, wenn eine Seite weitere Hyperlinks und Formularobjekte enthält. Der Benutzer gelangt dann in einer bestimmten Reihenfolge mithilfe der Tabulatortaste von einem Element zum nächsten.

Das Formularobjekt wird im Dokument angezeigt.

• Bearbeiten Sie die jeweiligen Attribute in der Codeansicht.

• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Mac) und wählen Sie dann „Tag bearbeiten“.