HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » Dreamweaver MX » Formulare

Dreamweaver MX: Formulare

von Oliver Schonschek

Webseiten gewinnen ungemein durch das Angebot von interaktiven Elementen. Für geschäftliche Websites, aber zunehmend auch auf privaten Homepages, sind Formulare kaum noch wegzudenken. Mit Dreamweaver ist es möglich, individuelle HTML-Formulare zu erzeugen, die nicht nur professionell aussehen, sondern auch die Formulardaten an ihren Bestimmungsort bringen.

Anzeige

Erstellung von HTML-Formularen  nach oben

Formulare sind bei vielen Internetusern und bei noch mehr Website-Anbietern sehr beliebt. Die gewünschten Daten werden gezielt abgefragt und erreichen den Empfänger in strukturierter Form.
Ob Kontaktformulare, Registrierungen für Newsletter oder Bestellformulare zur Einrichtung eines einfachen Online-Shops, sie alle können ohne großen Auswand in dem Web-Autorensystem Dreamweaver erzeugt werden. Wir wollen uns als Beispiel ein Formular zur Anforderung von Produktinformationen vornehmen.

Um nun das erste Formular in Dreamweaver zu erzeugen, öffnet man zuerst eine HTML-Datei mittels dem Menüpunkt "Datei - Neu - Einfache Seite - HTML" und wählt unter "Einfügen" die Option "Formular" und dort nochmals die Auswahl "Formular". In der Entwurfsansicht ist jedoch bisher nur ein rot gestrichelter Bereich zu sehen, sonst nichts. Leben kommt in das geplante Formular über die Formular-Eigenschaftsleiste unter dem Dokumentenfenster. Dort kann man nicht nur einen Namen für das Formular festlegen, sondern auch die Methode, mit der die eingegebenen Daten aus dem Formular ausgelesen werden soll.

Zur Auswahl stehen die Methoden POST, GET und Standard. POST bettet die Formulardaten in eine http-Anforderung oder eine E-Mail ein. GET fügt die Formulardaten an die URL an, die über das Formular angefordert wird. Standard übernimmt die vorhandenen Einstellungen des Browsers, in der Regel ist dies GET. Eine einfache Form der Datenübermittlung ist die POST -Methode unter Nutzung eines "mailto". Dazu trägt man im Eigenschaftsinspektor die Aktion "mailto: name@provider.com" ein, so dass man die eingetragenen Daten der User als E-Mail an seine Adresse bekommt.

Erstellung eines Formulars mit Textfeldern
Darstellung: Erstellung eines Formulars mit Textfeldern

Nun beginnt man mit dem Design des Formulars und fügt zum Beispiel Textfelder für die Adresse des Interessenten ein. Dies gelingt, indem man in den rot gestrichelten Bereich klickt und unter "Einfügen - Formular" die Option "Textfeld" auswählt. Das Eigenschaftsbedienfeld ändert sich erneut. Hier kann man die Länge, die Zeilenanzahl sowie den Anfangswert für das Textfeld einstellen. Der Anfangswert ist der Text, der zu Beginn in dem Textfeld steht und in der Regel zur Eingabe auffordert oder eine Erläuterung bietet. Mit einem Textfeld oder auch einer Vielzahl davon für die Adresse ist es alleine aber noch getan. Man braucht natürlich noch Schaltflächen. Diese findet man unter "Einfügen - Formular - Schaltflächen". Auch hierfür gibt es wieder eine Bedienfeldgruppe, in der man die Beschriftung sowie die auszulösende Aktion für die Schaltfläche aussuchen kann. Zur Wahl stehen die Aktionen "Abschicken", "Zurücksetzen" und "Keine". Die letzte Möglichkeit "Keine" klingt nicht sehr logisch, denn wofür sollte man dann eine Schaltfläche einfügen, wenn sie keine Aktion auslöst.

In Wirklichkeit ist die Auswahl "Keine" die Vorbereitung dafür, neben den Standardschaltflächen und Aktionen wie Versenden und Zurücksetzen eigene Schaltflächen und Reaktionen zu programmieren. Hierfür steht in Dreamweaver zum Beispiel JavaScript zur Verfügung. Die Möglichkeiten von JavaScript innerhalb des Programms Dreamweaver werden im nächsten Kapitel vorgestellt. Natürlich kann Dreamweaver auch JavaScript-Befehle einfügen, die die eingegebenen Formulardaten nach individuellen Vorgaben validieren.

Eine einfache Formulareingaben-Prüfung kann man implementieren, indem man ein Textfeld markiert, und unter dem Menüpunkt "Fenster" die Option "Verhalten" auswählt und dort "Formular überprüfen" anklickt. Die Auswahlmöglichkeiten sieht man erst, wenn man das große Plus-Zeichen drückt. Der sich öffnende Dialog erlaubt die Festlegung, ob es sich um ein Pflichtfeld handelt und welche Werte akzeptiert werden sollen ("Alles", "Zahl", "E-Mail-Adresse" oder "Zahl zwischen … und …"). Damit sind schon einmal einfache Prüfungen möglich. In unserem Beispiel würde man das Textfeld für die E-Mail-Adresse als Pflichtfeld definieren und den Eintrag als E-Mail-Adresse prüfen lassen. Dann kann man die gewünschten Produktinformationen auch kostengünstig per E-Mail verschicken.
In dem rechts vom Dokumentenfenster befindlichen Bedienfeld zum Thema "Verhalten" sieht man nach Abschluss der Definition zur Formularüberprüfung ein zugewiesenes Ereignis. Dies kann zum Beispiel "onBlur" oder "onChange" sein. Bei "onBlur" wird die Aktion "Formular überprüfen" immer ausgelöst, wenn sich der Mauszeiger von dem Textfeld wegbewegt. Bei "onChange" ist dies nur der Fall, wenn der Inhalt des Textfeldes wirklich geändert wurde.

Einfügen von Steuerelementen  nach oben

Ein Formular besteht natürlich nicht nur aus Textfeldern und Schaltflächen zum Versenden oder Zurücksetzen. Mit Dreamweaver lassen sich alle in HTML definierbaren Formularelemente erzeugen, so zum Beispiel Optionsschalter. Solche Schalter sind nützlich, wenn der User nur eine begrenzte Auswahl an Antwortmöglichkeiten hat und nur eine dieser Möglichkeiten jeweils zutreffen kann. Zu einem Nachnamen in der Adresse gehört entweder "Herr", "Frau" oder "Familie". Dies kann man als Optionsschalter leicht abbilden. Der Anwender erhält eine Unterstützung bei der Befüllung des Formulars, der Anbieter dagegen stellt sicher, dass keine unpassenden Angaben gemacht werden können.

Solche Optionsschalter erzeugt man in Dreamweaver durch Auswahl des Menüpunktes "Einfügen - Formular - Optionsschalter". In dem sich öffnenden Eigenschaftsbedienfeld kann man dem Schalter einen Namen geben, den Anfangsstatus wählen (Aktiviert / Nicht Aktiviert) und einen aktivierten Wert einfügen. Nun reicht aber in der Regel nicht ein Optionsschalter (Frau), sondern man braucht für das genannte Beispiel noch zwei weitere (Herr und Familie).

Wichtig ist es, den weiteren Schaltern den gleichen Namen zu geben wie dem ersten, so dass sie als Gruppe definiert werden. Ganz ähnlich verhält es sich mit "Kontrollkästchen", die dem User jedoch die Möglichkeiten geben, mehrere Auswahlen zu treffen. Verwendung finden solche Check-Boxen zum Beispiel bei der Frage, woher der User die Website kennt. So könnte er von der Website von Freunden gehört haben, sie aber auch zusätzlich in Suchmaschinen gefunden haben.

Ein weiteres nützliches Formularobjekt ist eine Pulldownliste. Damit kann man dem User eine ebenfalls komfortable Hilfe bei der Bearbeitung eines Web-Formulars an die Hand geben. In Online-Shops kann man auf diesem Wege die möglichen Bezahlverfahren zur Auswahl anbieten. In unserem Beispiel könnten die Produkte genannt sein, zu denen man Informationen erhalten kann. Auch die Erstellung dieses Formularelementes gelingt durch die Nutzung des Menüeintrages "Einfügen - Formular", wobei man nun die Option "Liste / Menü" auswählt.

Die dadurch erzeugte Liste zeigt später alle Optionen (im Beispiel Produkte), die definiert wurden, an und kann über einen Rollbalken gescrollt werden. Wählt man in dem entsprechenden Eigenschaftsinspektor den Typ "Menü", so darf der User nur jeweils eine Auswahl treffen, ansonsten kann er in der Liste mehrere Optionen markieren. Die Auswahl mehrerer gewünschter Produktinformationen in unserem Beispiel wird sicherlich erwünscht sein.

Der Eigenschaftsinspektor zu dem Formularelement "Liste / Menü" bietet eine Schaltfläche namens "Listenwerte", die einen Dialog öffnet, in dem man die einzelnen Einträge der Liste mit Bezeichnung und Wert definieren kann. Dabei wird die Bezeichnung in der Liste angezeigt, der Wert jedoch wird bei entsprechender Auswahl durch den User innerhalb der Formulardaten versendet. In unserem Beispiel könnte die Bezeichnung der werbewirksame Produktname sein, der Wert ist aber die unscheinbare interne Artikelnummer.

Die hier behandelten Formularelementen geben einen ersten Eindruck über die Möglichkeiten von Dreamweaver für die Erstellung von Web-Formularen. So kann man recht einfach ein Anforderungsformular für Produktinformationen erzeugen. Dieses Werkzeug bietet aber natürlich noch viel mehr Leistungen für die Formularentwicklung. Wenn Sie Ihre ersten HTML-Formulare mit diesem Programm erstellt haben, kommen Sie vielleicht auf den Geschmack und steigen tiefer ein.



« zurück weiter »
Bewerten

 

Dreamweaver MX

.Autor:Jan Winkler.
. Bewertung:
Dreamweaver MX: Formulare HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 18 Beiträge im Dreamweaver MX Forum .

Navigation


 
     
 

Anzeige