Webformulare erstellen

In der Entwurfsansicht sind Formulare durch einen rot gepunkteten Rahmen gekennzeichnet. Falls du diese Kontur nicht siehst, wähle Ansicht > Visuelle Hilfen > Unsichtbare Elemente aus.

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.

Verwende Zeilenumbrüche, Absatzumbrüche, vorformatierten Text oder Tabellen, um deine Formulare zu formatieren.Du kannst kein Formular in ein anderes Formular einfügen (das heißt, du kannst Tags nicht überlappen), aber du kannst mehr als ein Formular auf einer Seite einfügen.

Beim Gestalten von Formularen solltest du daran denken, die Formularfelder mit beschreibendem Text zu kennzeichnen, damit Benutzer wissen, worauf sie antworten sollen—zum Beispiel „Gib deinen Namen ein", um nach Namensinformationen zu fragen.

Verwende Tabellen, um Formulobjekten und Feldlabels Struktur zu verleihen.Stelle beim Verwenden von Tabellen in Formularen sicher, dass alle table-Tags zwischen den form-Tags enthalten sind.

legt den Namen des Dateifeldobjekts fest.

Gibt die maximale Anzahl von Zeichen an, die im Feld angezeigt werden können.

Gibt die maximale Anzahl von Zeichen an, die das Feld aufnehmen kann. Wenn der Benutzer durchsucht, um die Datei zu finden, können der Dateiname und Pfad den angegebenen Wert für Max. Zeichen überschreiten. Wenn der Benutzer jedoch versucht, den Dateinamen und Pfad einzugeben, lässt das Dateifeld nur die Anzahl von Zeichen zu, die durch den Wert Max. Zeichen angegeben ist.

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

weist der Schaltfläche einen Namen zu. Zwei reservierte Namen, Senden und Zurücksetzen, weisen das Formular an, die Formulardaten an die Verarbeitungsanwendung oder das Skript zu übermitteln oder alle Formularfelder auf ihre ursprünglichen Werte zurückzusetzen.

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

Ermöglicht es dir, beschreibenden Text einzugeben, falls das Bild im Browser nicht geladen werden kann.

stellt das Attribut „align“ des Objekts ein.

Startet deinen Standard-Bildeditor 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ähle das Format aus, in dem Dreamweaver die Buttons 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. Wenn keine Datenquellen in der Liste angezeigt werden oder die verfügbaren Datenquellen deinen Anforderungen nicht entsprechen, klicke auf den Plus-Button (+), 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.

Das Feld Optionsfeld-Wert zeigt die Werte aller Optionsfelder in der Gruppe an.

Das ausgewählte Recordset enthält Werte, die den aktivierten Werten der Optionsfelder entsprechen. Um die aktivierten Werte der Optionsfelder anzuzeigen, wähle jedes Optionsfeld aus und öffne 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.

Stelle sicher, dass jedes Textfeld, das du validieren möchtest, einen eindeutigen Namen hat.

Du könntest beispielsweise festlegen, dass ein Textfeld für das Alter einer Person nur Zahlen akzeptiert.

Du kannst beispielsweise den Namen einer Funktion eingeben, die noch nicht existiert, wie processMyForm().

Du könntest zum Beispiel die folgende JavaScript-Funktion im head-Bereich des Dokuments definieren, um eine Nachricht anzuzeigen, wenn der Benutzer auf den Button „Senden" klickt:

function processMyForm(){

alert('Danke für deine Bestellung!');

}

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: Das ist die bevorzugte Option für Barrierefreiheit; die Funktionalität kann jedoch je nach Browser variieren.

bewirkt, dass kein Label-Tag verwendet wird:

Verwendet ein Tastaturäquivalent (ein Buchstabe) und die Alt-Taste (Windows) oder die Control-Taste (Macintosh), um das Formularobjekt im Browser auszuwählen. Wenn du zum Beispiel B als Zugangsschlüssel eingibst, können Anwender mit einem Macintosh-Browser Control+B drücken, um das Formularobjekt auszuwählen.

gibt eine Tabulatorreihenfolge für die Formularobjekte an. Wenn du die Tab- Reihenfolge für ein Objekt festlegst, musst du die Tab-Reihenfolge für alle Objekte festlegen.

Die Festlegung einer Tab-Reihenfolge ist nützlich, wenn du andere Links und Formularobjekte auf der Seite hast und der Anwender in einer bestimmten Reihenfolge durch sie navigieren soll.

Das Formularobjekt wird im Dokument angezeigt.

• Bearbeite die entsprechenden Attribute in der Code- Ansicht.

• Rechtsklicke (Windows) oder Control‑klicke (Macintosh), und wähle dann Tag bearbeiten aus.