DREAMWEAVER-INHALT

FORMULAR

Für den Online-Shop der Übungsfirma KUMMER + SORGE legen wir ein Bestellformular an:
  • Datei / Neu
  • Zentrierter Text:                 Für Ihre Bestellung gelten die AGB von Kummer + Sorge
  • Wird die Option Formulare ausgewählt, erscheint gleichzeitig die Leiste mit den Formularfunktionen Bild 1


Bild 1

• Einfügen / Formular oder Klick auf das Formularsymbol  
 
Jetzt wurde ein rot gestrichelter Bereich eingeblendet. Alle innerhalb der Linie liegenden Elemente sind Bestandteile des Formulars.
 
  • Das Formular bekommt einen aussagekräftigen Namen: auftrag  Bild 3
  • eine Tabelle wird benötigt: Einfügen / Tabelle
  • 4 Spalten 9 Zeilen reichen für den Anfang (mit der Tab-Taste kann sie leicht erweitert werden)

Den Käufern soll die Möglichkeit geboten werden, aus drei Zahlungsarten...


Bild 3
 
 
 Zahlungsart:     Nachnahme   Bankeinzug   Rechnung
 
... die gewünschte durch Anklicken auszuwählen...
 

So wird die Zeile angelegt:

  • in jede Zelle der ersten Zeile einen Begriff schreiben
  • Cursor vor das Wort Nachnahme setzen
  • und den Optionsschalter mit einem Klick auf das Symbol einfügen 
  • das daraufhin eingeblendete Fenster wegklicken
  • die Eigenschaften des ersten Optionsschalters festlegen:
     
     
  • den Ablauf bei  Bankeinzug und  Rechnung  wiederholen (Aktivierter Wert auf Bankeinzug bzw.  Rechnung ändern)
  • 2. Zeile / 1. Spalte  Bankadresse:  eintragen
  • 2. Zeile die Spalten (Zellen) 2, 3 und 4 miteinander verbinden
  • und ein einzeiliges Textfeld mit Klick auf   einfügen - mehrzeilige Textfelder erhält man nach einem Klick auf  (die im nächsten Fenster angebotenen Eingabehilfen können auch nachträglich eingegeben werden, daher "Abbrechen")
  • die gewünschten Einstellungen im Eigenschaften-Inspektor (wem wohl der "Inspektor" eingefallen ist?!) vornehmen
     
     
  • das Formular nach den Vorgaben (lt. Bestellformular Bild unten) ergänzen


Bestellformular

In einem mehrzeiligen Textfeld wird den Kunden die Möglichkeit geboten, ihrer Bestellung einen Kommentar anzufügen.

Ein Listenfeld macht das Ausfüllen bequemer und sicherer. Bei Staat (*) könnte ein Länderaufzählung "aufklappen":
  • Cursor in das gewünschte Feld
  • Klick auf
  • bei Eigenschaften kann unter der Option Listenwerte...
     
     
  • eine Auswahl der möglichen Staaten eingetragen werden  Abb. Listenwerte
  • ein Klick auf das Plus-Zeichen fügt den jeweiligen Begriff der Liste hinzu
  • OK


Listenwerte

Jetzt kann neben der Bezeichnung Staat über eine Drop-Down-Liste der Staat bestimmt werden. Bild unten

Am Ende des Formulars lassen wir den Kunden die Wahl, ihre Angaben abzuschicken oder zu korrigieren. Dazu richten wir die Schaltflächen Abschicken und Zurücksetzen ein.
  • Klick auf das Schaltflächen-Symbol 
  • bei Eigenschaften die Aktion  Abschicken  aktivieren
     
     
  • in der Nachbarzelle ebenfalls eine Schaltfläche einfügen, deren Eigenschaften auf Zurücksetzen einrichten
     
     
  • die fertigen Schaltflächen:

Damit ist die Formulargestaltung beendet.
Bleibt noch als letzte Aufgabe die Überprüfung der Benutzereinträge: sind alle Pflichtfelder (*) ausgefüllt, mit welchen Browserversionen soll das Formular problemlos verwendet werden können, welche Meldungstexte werden eingeblendet?

  • Formular markieren
  • Fenster / Verhalten
  • bei Tag<form> das Register Verhalten öffnen
  • Klick auf das + blendet ein Menü ein, in dem über Ereignisse zeigen für ein Browser bestimmt werden kann
     
     
  •  erneuter Klick auf das + und im Menü die Option Formular überprüfen wählen
     
     
     
  • bei allen mit (*) gekennzeichneten Feldern die Option Wert: auf Erforderlich setzen
  • bei E-Mail (*) die Option E-Mail-Adresse: aktivieren
  • OK

Damit die eingegebenen Daten per Mail an den Webserver geleitet werden ist ein CGI-Programm erforderlich. Alle Provider bieten diesen Service in ihren Leistungspaketen. Ist nur eine Frage des Preises.

 

DREAMWEAVER-INHALT