Formulare in Dreamweaver Seite 1 Übung zu Web-Formularen Formular für Online Pizza Bestellung mit Dreamweaver erstellen

Formulare in Dreamweaver Seite 2 Layout für Formular

Formulare in Dreamweaver Seite 3 Erste Schritte  Starten Sie Dreamweaver und  geben Sie im Dokument-Fenster die Überschrift des Formulars ein  Formatieren Sie die Überschrift: Schrifart: Arial, Helvetica, sans serif Absatz zentrieren

Formulare in Dreamweaver Seite 4 Dokumenttitel eingeben  Fügen Sie folgenden Text als Titel ein: Pizzaservice Hohenheim

Formulare in Dreamweaver Seite 5 Formular einfügen  Wählen Sie den Befehl Einfügen > Formular und füllen Sie die Felder im Eigenschaften-Fenster wie unten im Bild. (Tragen Sie bitte Ihre adresse ein im Feld "Aktion")

Formulare in Dreamweaver Seite 6 Formular einfügen Hinweis: Sie können das Einfügen des Formulars und der einzelnen Formularfelder auch über die Leiste "Einfügen" bewerkstelligen. Dazu müssen Sie die Registerkarte "Formular" auswählen

Formulare in Dreamweaver Seite 7 Tabelle in Formular einfügen  Fügen Sie in das rot umrandete Feld für das Formular eine Tabelle ein mit folgenden Eigenschaften:

Formulare in Dreamweaver Seite 8 Texteingabe in Tabelle  Zentrieren Sie die Tabelle mit Hilfe des Eigenschaften-Fesnsters  Fügen Sie jetzt den Text in die Zellen der linken Spalte ein, wie in der Vorlage zu sehen.

Formulare in Dreamweaver Seite 9 Textfeld "Name" einfügen  Gehen Sie in die erste Zelle rechts und wählen Sie den Befehl: Einfügen > Formularobjekt > Textfeld  Definieren Sie die Eigenschaften wie unten im Bild

Formulare in Dreamweaver Seite 10 Textfelder "Straße" und "PLZ"  Wiederholen Sie den Vorgang für die Spalte "Straße"  "PLZ"

Formulare in Dreamweaver Seite 11 Textfelder "Ort" und "Telefon"  "Ort"  und "Telefon".

Formulare in Dreamweaver Seite 12 Listenfeld "Bestellung"  Gehen Sie Spalte "Bestellung" und wählen Sie den Befehl: Einfügen > Formularobjekt > Liste/Menü  Definieren Sie die Eigenschaften wie unten im Bild

Formulare in Dreamweaver Seite 13 Listenfeld "Bestellung"  Klicken Sie dann im Eigenschaften-Fenster auf die Schaltfläche "Listenwerte"  Geben Sie die Auswahlmöglichkeiten in der Liste wie unten im Bild an. Sie müssen nach jedem Eintrag auf "+" klicken, um einen neuen Eintrag einzugeben.

Formulare in Dreamweaver Seite 14 Listenfeld "Zutaten" mit Mehrfachauswahl  wählen Sie den Befehl: Einfügen > Formularobjekt > Liste/Menü  Definieren Sie die Eigenschaften wie unten im Bild

Formulare in Dreamweaver Seite 15 Listenfeld "Zutaten" mit Mehrfachauswahl  Klicken Sie dann im Eigenschaften-Fenster auf die Schaltfläche "Listenwerte"  Geben Sie die Auswahlmöglichkeiten in der Liste wie unten im Bild an. Sie müssen jedem Eintrag auf "+" klicken, um einen neuen Eintrag einzugeben.

Formulare in Dreamweaver Seite 16 Listenfeld "Größe"  Wiederholen Sie den Vorgang für das Listenfeld "Größe" und tragen Sie folgende Eigenschaften ein  Die Listenwerte hier heißen: Klein, Groß, Partypizza

Formulare in Dreamweaver Seite 17 Textfeld "Zahl"  Fügen Sie jetzt in die Spalte "Anzahl" ein Textfeld mit folgenden Eigenschaften ein:

Formulare in Dreamweaver Seite 18 Textfeld "Lieferdatum, -zeit"  Fügen Sie in die Spalte "Lieferdatum, -zeit" ein Textfeld mit folgenden Eigenschaften ein:

Formulare in Dreamweaver Seite 19 Optionsfeld "Selbstabholung"  Geben Sie in die Spalte Lieferart den Text "Selbstabholung" und ein Leerzeichen ein  Wählen Sie den Befehl Einfügen > Formularobjekt > Optionschaltfläche  Definieren Sie die Eigenschaften wie im Bild unten

Formulare in Dreamweaver Seite 20 Optionsfeld "Hauslieferung"  Geben Sie dann als Text "Hauslieferung" und ein Leerzeichen ein  Wählen Sie den Befehl Einfügen > Formularobjekt > Optionschaltfläche  Definieren Sie die Eigenschaften wie im Bild unten

Formulare in Dreamweaver Seite 21 Mehrzeiliges Textfeld  Fügen Sie in die Spalte "besondere Wünsche" ein mehrzeiliges Textfeld ein: Einfügen > Formularobjekt > Textfeld  Definieren Sie die Eigenschaften wie im Bild:

Formulare in Dreamweaver Seite 22 Schaltfläche "Bestellung abschicken"  Gehen Sie in die letzte Tabellenzeile und wählen Sie den Befehl Einfügen > Formularobjekt > Schaltfläche  Definieren Sie die Eigenschaften wie im Bild:

Formulare in Dreamweaver Seite 23 Schaltfläche "Felder löschen"  Fügen Sie ein Leerzeichen ein und wählen Sie den Befehl Einfügen > Formularobjekt > Schaltfläche  Definieren Sie die Eigenschaften wie im Bild:

Formulare in Dreamweaver Seite 24 Formular speichern und testen  Speichern Sie das erstellte Formular im Verzeichnis H:\public_html\uebungen  Laden Sie das Formular in Netscape, füllen Sie die Felder aus und schicken Sie es ab.  Prüfen Sie nach, ob die Bestellung als Mail bei Ihnen angekommen ist

Formulare in Dreamweaver Seite 25 Formular speichern und testen Die Mail sieht etwa wie folgt aus: Name=Peter+Krause&Strasse=Gartenstrasse&Ort=70794+Filderstadt&Bestellung= Die abgeschickten Formulardaten sehen nicht sehr übersichtlich aus. Wir müssen noch etwas nachbessern im Bestellformular.

Formulare in Dreamweaver Seite 26 HTML-Code Verbessern  Öffnen Sie die Formulardatei in Dreamweaver und wechseln Sie in die Code-Ansicht durch den Befehl: Ansicht/Code

Formulare in Dreamweaver Seite 27 HTML-Code Verbessern  Suchen Sie die Anweisung  Ergänzen Sie diese Anweisung um das Attribut enctype="Text/Plain"  Speichern Sie die Datei wieder ab.

Formulare in Dreamweaver Seite 28 Bestellformular erneut testen Jetzt sehen die abgeschickten Daten vernünftiger aus: Name=Peter Krause Strasse=Gartenstrasse 21 Ort=70794 Filderstadt Bestellung=Pizza mit Artichoken Zutaten=Oregano Zutaten=Zwiebel Groesse=Blech: 60cm.x40cm. Anzahl=3 Datum=2.6.01, Uhr Lieferart=Hauslieferung Wuensche= Bitte pünktlich liefern