HTML-Formulare erstellen und mit CSS & Javascript gestalten

Um ein Formular zu nutzen, wird Folgendes benötigt:

  • das Formular mit den Informationen über Versandart der Daten (GET/POST oder per Email-Programm)
  • die darin enthaltenen Formularelemente als Eingabeoberfläche für den Benutzer. Nur die Inhalte, die in Formularelemente eingegeben werden, werden versendet.

Die Übertragungsmethoden in der Übersicht

Es gibt drei verschiedene Methoden, um Daten aus einem Formular zu versenden. Jede besitzt ihren eigenen Einsatzzweck:

  • GET
  • POST
  • Formulare per Mail

GET: Hier werden Daten aus dem Formular einfach an die URL angehängt und an den Server gesendet. Jeder kennt die vielen Zahlen und Variablen bei diversen Emailwebhostern in der Adressleiste des Browsers. Das sind Daten, die mit GET verschickt wurden (z. B. Kundennummer oder Session-ID).

Der Nachteil dieser Methode ist die völlig offene Übertragung. Für sensible Daten ist dieser Weg daher nicht geeignet. Außerdem ist die Menge der Daten, die auf diesem Weg versandt werden können, eingeschränkt.

Der Vorteil dieser Methode liegt darin, dass du diese Websites ggf. bookmarken kannst (z. B. wenn bestimmte Parameter wie eine Kategorie übergeben wurden).

POST: Die zweite Methode POST eignet sich besser, Daten in größeren Mengen und verdeckt zu versenden. Dazu ist allerdings notwendig, einen Server, der diverse Scriptsprachen unterstützt, zum Auswerten der Daten zu besitzen. Jedoch sollte das in heutigen Zeiten kein Problem sein, da mittlerweile selbst die kleinsten Webhosting-Pakete PHP unterstützen.

Formulare per Mail: Eine immer wieder genutzte Möglichkeit ist die Übertragung der Formularinhalte per Mail. Diese Methode ist in meinen Augen jedoch absolut unprofessionell. Sie setzt auf User-Seite ein Mailprogramm voraus und ist damit vollständig vom Besucher abhängig. Genau das will man eigentlich durch den Einsatz von Formularen vermeiden.

Formulardaten auswerten: Wenn du keine Skripte auf deinem Webserver laufen lassen kannst, die dafür sorgen, dass die Maildaten richtig ausgewertet und versendet werden, kannst du diverse Dienstleister für den Formularversand nutzen (z. B. www.formmailer.de bzw. unter www.kostenlos.de nachschauen). Wenn du dies nicht willst und auch kein Skript einsetzen kannst, füge dem Form-Tag den Parameter enctype=“text/plain“ hinzu. Dieser sorgt dafür, dass der Text in den Mails für dich und das Mailprogramm halbwegs lesbar ist. Outlook hat dennoch immer wieder Probleme mit Mails aus Formularen. Trotzdem rate ich von dieser Methode eindeutig ab.

Wir empfehlen:
Dreamweaver-Video-Training

Ein Formular erstellen

Um in Dreamweaver ein Formular zu erstellen, klickst du im Register Formulare auf das Formular-Symbol:


Es wird dir durch einen roten Rand angezeigt, dass du ein Formular eingefügt hast. Bedenke dabei, dass dies nicht der tatsächlichen Ansicht im Browser entspricht.


 

Formulare werden automatisch von Dreamweaver benannt. Diese Benennung ist vor allem dann wichtig, wenn es in einem Dokument mehrere Formulare gibt oder einzelne Elemente im Formular mit JavaScript angesprochen werden sollen. Entweder du stellst es direkt im Quellcode ein …


… oder bequemer in der Eigenschaften-Palette:


Der Zielort für die Daten des Formulars wird in den meisten Fällen ein PHP-Server sein, der die Daten auswertet. Trag deshalb bei Aktion den Pfad zum PHP-Script ein. Dieses kann ein absoluter oder relativer Pfad sein. Im Popup-Menü Methode kannst du GET oder POST auswählen.


Verschiedene Kodierungstypen können notwendig sein, wenn du z. B. keine Text-, sondern Binärdaten (z. B. Bilddaten) übertragen möchtest.

So, jetzt wird’s langsam ernst: Um dem Benutzer die Eingabe von bestimmten Daten zu ermöglichen, musst du diverse Formularelemente wie Textfelder, Kombinationsboxen oder Radiobuttons einfügen.


Jedes Textfeld usw. bekommt einen eindeutigen Variablennamen. Dabei ist auf Groß- und Kleinschreibung zu achten. Variablen wie z. B. testvariablen und TextVariabel sind vollkommen unterschiedlich. Auch sind keine Sonderzeichen bis auf das _ Zeichen erlaubt. Ganz wichtig: Wenn du schon Zahlen in den Variablen verwendest, dann nur nach dem Text wie z. B. test1 oder test_variabel2 und nicht 2test.

Jetzt kannst du erst einmal ein Textfeld, welches im Web das am meisten benutze Formularelement ist, einfügen. Dazu klickst du im Register Formulare auf die Schaltfläche Textfeld:


Die ID ist der Variablen-Name, der, wie oben erklärt, keine Sonderzeichen und Leerzeichen enthalten darf. Als Beschriftung kannst du entweder den gleichen Namen vergeben oder eine aussagekräftige Bezeichnung, die dann dem Benutzer vor dem Textfeld angezeigt wird.

Im Eigenschafts-Inspektor kannst du weitere Optionen für das Textfeld aktivieren:


Z. B. hast du die Möglichkeit, das Textfeld auf eine bestimmte Breite einzustellen oder die Zeichen zu begrenzen. Möchtest du das Textfeld in ein Kennwort-Feld ändern, reicht ein Klick auf die Option Kennwort. Dann werden alle Zeichen, die der Benutzer eingibt, als Sternchen angezeigt. Auch ganz nützlich kann die Option Anfangswert sein. Hier kannst du dem Benutzer durch einen Beispielwert zeigen, was er einzugeben hat (z. B. „Geben Sie hier Ihren Vornamen ein“).

Versteckte Textfelder

Manchmal ist es erforderlich, bestimmte Werte zu übergeben, ohne dass der Benutzer diese sieht. Hier auf PSD-Tutorials.de werden im Shop-System so z.B. der Mitgliedername übergeben, ohne dass der Benutzer dies sehen soll. Um ein verstecktes Textfeld einzufügen, klickst du im Register Formulare>Verstecktes Feld:


Im Grunde sind versteckte Textfelder nichts anderes als ganz normale Textfelder, die nur ausgeblendet sind. Mir selber ist es schon ein paar Mal passiert, dass ich versteckte Textfelder eingefügt habe, jedoch die Werte nicht korrekt übergeben wurden. Darum ist es hilfreich, erst einmal mit normalen, sichtbaren Textfeldern zu arbeiten und wenn dann alle Daten korrekt übertragen werden, diese in versteckte Textfelder umzuwandeln. Schade, dass Dreamweaver nicht die Option anbietet, dies per Klick umzuwandeln.

 

Trotzdem ist es nicht schwer. Klicke die Option Teilen, dass der Quellcode mit angezeigt wird. Danach kannst Du bei type von „text“ in „hidden“ ändern.


In Dreamweaver werden versteckte Felder als gelbes Symbol hervorgehoben (sofern du das nicht in den Voreinstellungen deaktiviert hast). So lassen sich auch diese Felder wie gewohnt per Drag&Drop verschieben.

Textfelder

Um ein Textfeld in ein vorhandenes Formular einzufügen, klickst du genauso wie beim Textfeld in der Symbolleiste Formulare auf Textbereich.

 

Mein Beispiel sieht jetzt nicht gerade prickelnd aus, aber Textbereiche werden gerade für Kommentare/Bemerkungen immer wieder genutzt. Ein Beispiel wäre unser Kontaktformular auf psd-tutorials.de:

 

Du hast im Eigenschaftsinspektor die Möglichkeit, die Anzahl der Zeilen einzustellen. Ich empfehle immer, für ein Bemerkungsfeld mindestens 5 Zeilen einzugeben. Auch ist es wichtig, dass du den Umbruch der Zeilen definierst. Entweder Virtuell oder Physisch bzw. komplett ausgestellt. Die Standardeinstellung ist gleichbedeutend mit Aus. Virtuell bedeutet, dass bei der Texteingabe der Text automatisch umbrochen wird; die so entstandenen Zeilenumbrüche werden beim Absenden des Formulars nicht mit übertragen. Mit der Einstellung Physisch wird der Text ebenfalls umbrochen und die Zeilenumbrüche werden beim Absenden des Formulars mit übertragen.

 

Im Beispiel siehst du auch ein Kombinationsfeld bzw. auch Liste/Menü genannt, worin du dann den Ansprechpartner auswählen kannst. Um so ein Listenmenü-Feld einzufügen, klickst du oben auf Formulare>Liste/Menü:

 

Danach kannst du die Liste mit diversen Werten füllen. Der Unterschied zwischen Menü und Liste ist wie folgt:

 

In einem Menü wird nur eine Zeile angezeigt, und darin wählst du dann per Auswahl den Ansprechpartner aus. In einer Liste siehst du gleich auf Anhieb alle Ansprechpartner, was jedoch auch viel mehr Platz verschwendet. Vorteil ist jedoch bei der Liste, dass du in den Optionen einstellen kannst, ob z. B. mehrere Ansprechpartner ausgewählt werden können. Trotzdem bevorzuge ich eher das Menü. Aber man kann zur Not auch weniger in einer Liste anzeigen lassen. Also je nach Vorlieben kann ein Menü oder eine Liste von Vorteil sein.

Jetzt könntest du noch ein Kontrollkästchen mit ins Formular einfügen, um z. B. dem Besucher die Möglichkeit zu geben, sich eine Kopie des ausgefüllten Formulars an seine Email-Adresse schicken zu lassen.


Darin kannst du den Wert eintragen, welcher dann beim Versenden des Formulars mit übergeben werden soll. Denn so kannst du dann per PHP-Code auswerten, ob die E-Mail auch an den Besucher versendet werden soll oder nicht (ist jetzt nicht vollständig):

 

Das Gleiche könntest du auch mit den Optionsschaltern, auch Radiobuttons genannt, ermöglichen:


Jedoch sollte man die Tücken dahinter nicht verschweigen. Baust du Radiobuttons ein, musst du entweder mit dem Kompromiss leben, dass, wenn der Benutzer die Option aktiviert hat, er diese nicht mehr entfernen kann, außer er lädt die Seite neu. Alternative: Du fügst zwei Radiobuttons ein. ABER: Die zwei Radiobuttons müssen dann den gleichen Variablen-Namen enthalten. In meinem Beispiel habe ich den von Dreamweaver vorgefertigten Namen einfach drin stehen lassen: radio

Sobald du diesen Namen bei nur einem Radiobutton änderst, wird der Benutzer beide Optionen anklicken können und beide wären dann ausgewählt. Das ist aber nicht Sinn und Zweck. Darum achte darauf. Manchmal kann es aber sein, dass du z. B. eine weitere Frage auswählen lassen möchtest. Dann musst du natürlich dem 3. Radiobutton einen anderen Namen geben. Also: Alle Radiobuttons innerhalb einer Gruppe brauchen auch den gleichen internen Namen.

 

Dateifelder für Anlagen bzw. Uploads sind eine nützliche Funktion, um z. B. Dateien auf den Server hochzuladen.

 

Wichtig ist jedoch, dass die Daten korrekt übertragen werden; im Quellcode das noch im Formular-Tag einzufügen: enctype= „multipart/form-data“. Eigentlich sollte diese Aufgabe von Dreamweaver automatisch übernommen werden. Ich habe jedoch nur die neueste CS3-Funktion. So kann ich nicht genau sagen, ob Dreamweaver auch in den Vorgängerversionen diese Option automatisch hinzufügt. Wenn nicht, weißt du ja, was zu tun ist.

Diese Funktion nutzen wir unter anderem in unserem Download-Formular auf psd-tutorials.de:

 

Zum Schluss musst du dem Formular noch eine Schaltfläche hinzufügen, damit es abgeschickt werden kann.

An sich sind diese Schaltenflächen für den Hausgebrauch ok. Soll es aber mal was schickeres sein, nimmst Du das Bildfeld:

 

Dann hast du die Möglichkeit, die Schaltfläche so zu gestalten, wie du es möchtest. Ich habe mir dazu schnell in Photoshop einen Button erstellt, den ich transparent als PNG-Datei gespeichert habe. So passt sich der Button jeder Hintergrundfarbe perfekt an. Damit du aber mit dieser Bildschaltfläche das Formular auch abschicken kannst, ist es notwendig, dem Button ein onClick – Ereignis hinzuzufügen. Das geht ganz einfach, indem du genau das einfügst (siehe Quellcode im Bild):

onClick=“submit()“

Damit wird nur das Ereignis hinzugefügt, dass beim Klick das Formular abgeschickt wird. Im Grunde ganz einfach.

Was genau passieren soll, wenn das Ereignis submit ausgeführt wird, sagt der Parameter action:

Meistens wird dort eine PHP-Datei hinterlegt, die dann alles auswertet und dann eine E-Mail versendet:

 

Jedoch kommt es immer wieder vor, dass nicht alle Felder, so wie man es eigentlich möchte, ausgefüllt werden. Dafür bietet Dreamweaver eine automatische Formularüberprüfung an:

 

Klicke dazu auf Verhalten>Formular überprüfen (wenn die Palette nicht angezeigt wird, kannst du diese unter Menü>Fenster>Verhalten einblenden). Vorher bitte aber den Sende-Button anklicken. Wenn du das bei einem Bild-Button anwenden möchtest, kannst du das OnClick – Ereignis „Submit“ entfernen, weil es sonst nicht korrekt funktioniert. Jetzt hast du die Möglichkeit, alle Felder anzugeben, die ein Pflichtfeld sind bzw. welches Feld eine E-Mail-Adresse ist. Denn bei Emailadressen wird Dreamweaver für dich genau überprüfen, ob ein @-Zeichen usw. vorhanden ist.

Nur einen Nachteil hat dieser Quellcode von Dreamweaver: Alle Fehlermeldungen sind englisch. Das sollte dich aber nicht daran hindern, diesen im Quellcode direkt zu übersetzen:

 

Übersetze darin einfach die englischen Fehlermeldungen ins Deutsche und schon hast du einen schönen sauberen Quellcode, der dir das Leben bei der Formular-Erstellung erheblich vereinfacht.

Was nützt einem aber das tollste Formular, wenn es vom Design her Stand von gestern ist? Darum möchte ich hier ein paar Tipps geben, wie du dein Formular ein wenig aufpeppen kannst.

Ich selber habe z. B. im Bestellformular von der PSD-Tutorials.de-DVD so einige kleine Raffinessen eingebaut. Aber schau dir das mal selber genau an:


Von der Struktur ist das Formular sehr leicht und durchschaubar aufgebaut. Im Grunde ist es fast das kleinste Shop-Formular, das es gibt, denn innerhalb von nur 2 Schritten ist eine Bestellung getätigt. Schritt 1 Daten eingeben, Schritt 2 kontrollieren und das war’s!

 

Wenn du das Formular aufrufst und dann in ein x-beliebiges Feld klickst, merkst du, dass sich die Farbe des Textfeldes in Gelb ändert. Das ist zwar Spielerei, dennoch finde ich es schön, gleich zu wissen, in welchem Feld sich der Benutzer befindet. Doch wie habe ich das gemacht? Heutzutage ist CSS nicht mehr wegzudenken, und genau so habe ich es gemacht. Der Quellcode verrät, dass das Feld auf zwei Ereignisse reagieren soll. Einmal auf onfocus, das heißt, wenn sich der Cursor darauf befindet, oder onblue, wenn der Cursor das Feld verlässt:

 

Also habe ich jetzt diese beiden Ereignisse dem neuen Textfeld zugeordnet:

onfocus="this.className='currentField'" onblur="this.className='normalformtext'"

Ganz oben habe ich dann noch die sich dahinter verbergenden CSS-Styles in die Datei eingefügt:


 

Natürlich wäre es besser, diese Styles in eine externe CSS-Datei einzufügen. Für das aktuelle Beispiel reicht das jedoch vollkommen aus.

Das Resultat kannst du dir jetzt sofort anschauen:

 

Das kannst du jetzt bei allen Textfeldern und auch anderen Formularelementen übernehmen. Trotzdem gefällt mir die Anordnung noch nicht so recht. Ich persönlich löse das ganz schnell mit einer Tabelle, auch wenn viele eher CSS-Boxen dafür nehmen würden:

 

Jetzt alle Elemente schön anordnen, damit diese in Reihe stehen:

 

Natürlich lässt sich dank CSS noch viel mehr erreichen. Diese kleinen Ansätze sollen dir nur verdeutlichen, welches Potential dank CSS in der Formulargestaltung möglich ist.

Sehr interessant finde ich auch die Option, dank Javascript nicht nur zu prüfen, ob bestimmte Felder ausgefüllt sind, sondern auch gleich bei nicht ausgefüllten Feldern in dieses Feld zu springen. So hat der Besucher weniger Mühe, bei großen Formularen das richtige Feld zu suchen. Ich habe genau das auch im Bestellformular von der PSD-Tutorials.de-DVD eingefügt:

 

Dann muss beim Formular-Tag das noch eingefügt werden:

Dank des Codes document.form.select_dvd.focus(); springt bei einem Fehler automatisch der Cursor zu diesem Feld. Erst wenn alles korrekt ausgefüllt ist, gibt das JavaScript return true aus und das Formular wird an modules.php?name=DVD_Verkauf gesendet.

Noch interessanter finde ich die Option, dass bei einem Auswahlfeld dank Javascript eine entsprechende Reaktion abläuft, je nachdem, was ausgewählt wurde:

 

Im Bestellformular wird, je nachdem, welche DVD ausgewählt wurde, diese per Bild unten angezeigt. Das geht mit dem Ereignis onchange. Hier wird, wie du im Bild siehst, das Script „bildWechsel(this)“ aktiviert:


Das übergibt nur die Anzahl der Zeile, und danach wird das entsprechende hinterlegte Produktbild geladen. Simpel, aber schön!

Ganz zum Schluss möchte ich dir noch einen Linktipp für besonders schöne Formulare geben:

http://www.drweb.de/weblog/weblog/?p=730 (sehr empfehlenswert)

http://www.drweb.de/weblog/weblog/?p=708

http://www.drweb.de/formulare/index.shtml

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training