Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative

Inhaltsverzeichnis
1 Einleitung
2 Projektablauf für die Buchwebsite
3 Programmgrundlagen
4 Dreamweaver erweitern
5 Eine Site erstellen
6 Grundlegende Dokumenteinstellungen
7 Tabellen in Dreamweaver
8 Bilder im Web
9 Framesets
10 Aktionen
11 Die Zeitleiste
12 CSS in Dreamweaver
13 Ebenen
14 Hyperlinks
15 Vorlagen und Bibliotheken
16 Formulare
17 Quelltext de Luxe
18 Dreamweaver und Flash
19 Office-Daten einfügen
20 Dynamische Websites – eine Einführung
21 Einführung in PHP
22 Lokalen Webserver installieren
23 Dynamische Sites in Dreamweaver einrichten
24 MySQL-Grundlagen
25 Datenbanken mit Dreamweaver anbinden
26 PHP und Dreamweaver
27 Datenbanken abfragen
28 Daten einfügen und dynamische Formulare
29 Datensätze bearbeiten
30 Benutzer authentifizieren und Zugriffsrechte festlegen
31 Fortgeschrittene Techniken
32 Dreamweaver 8 und XML
33 Menüs für dynamische Verhalten
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Dreamweaver 8 von Richard Beer, Susann Gailus
Webseiten entwickeln mit HTML, CSS, XML, PHP und MySQL
Buch: Dreamweaver 8

Dreamweaver 8
mit CD
639 S., 39,90 Euro
Rheinwerk Design
ISBN 978-3-89842-739-5
gp 16 Formulare
  gp 16.1 Übertragungsmethoden für Formulardaten
    gp 16.1.1 GET
    gp 16.1.2 POST
    gp 16.1.3 Formulare per Mail
  gp 16.2 Ein Formular erstellen
  gp 16.3 Formularelemente
    gp 16.3.1 Variablenvergabe
    gp 16.3.2 Textfelder
    gp 16.3.3 Versteckte Textfelder
    gp 16.3.4 Textbereiche
    gp 16.3.5 Kontrollkästchen (Checkboxen)
    gp 16.3.6 Optionsschalter (Radiobuttons)
    gp 16.3.7 Auswahllisten und Sprungmenüs
    gp 16.3.8 Dateifelder
    gp 16.3.9 Schaltflächen
  gp 16.4 Formulare überprüfen
  gp 16.5 Formulare gestalten
    gp 16.5.1 Formulare mit Tabellen gestalten
    gp 16.5.2 Formularelemente mit CSS gestalten


Rheinwerk Computing

16.5 Formulare gestalten  downtop


Rheinwerk Computing

16.5.1 Formulare mit Tabellen gestalten  downtop

Formulare sind sehr störrisch. Ohne eine ausgefeilte Tabellenstruktur ist es kaum möglich, die einzelnen Formularelemente gut zu positionieren. Vermeiden Sie dabei verbundene Zellen. Diese ergeben in den meisten Fällen weitere Unwägbarkeiten im Layout. Teilen Sie besser die Tabellen immer in mehrere einzelne Zellen auf. Zwischen den Formularfeldern und der Beschriftung ist es sinnvoll, eine weitere Tabellenspalte einzufügen. Der Text hängt ansonsten direkt am Formularelement.

Formulare ohne CSS | Eine Formatierung von Formularen ohne CSS ist nur bedingt möglich. Sie können zwar eine Zeichenanzahl für Textfelder eingeben, auf verschiedenen Plattformen und Browsern werden die Breiten jedoch unterschiedlich interpretiert (siehe Abbildung 16.10). Wenn Sie dennoch ohne CSS arbeiten möchten, sollten Sie darauf achten, in den Tabellenzellen genug Freiraum für unterschiedliche Breiten der Formularfelder zu schaffen, damit die Tabellen nicht gestreckt werden.

Abbildung 16.11 Ein Formularlayout mit Tabellen


Rheinwerk Computing

16.5.2 Formularelemente mit CSS gestalten  toptop

Mit den Kontext-Selektoren INPUT, SELECT und TEXTAREA können Formularfelder an das Layout einer Website exakt angepasst werden. Mit Listing 16.2 erhalten Sie somit ein schönes ausgewogenes Layout der Formularelemente:

Listing 16.2 Beispiel-CSS für Formularfelder

INPUT {
 font-family : Verdana, Geneva, Arial, Helvetica, 
   sans-serif;
 font-size : 10px;
 border : 1px solid #87A9B3;
 width: 200px;
}
SELECT {
 font-family : Verdana, Geneva, Arial, Helvetica, 
 sans-serif;
 font-size : 10px;
 border : 1px solid #87A9B3;
 width: 200px;
TEXTAREA {
 font-family : Verdana, Geneva, Arial, Helvetica, 
 sans-serif;
 font-size : 10px;
 border : 1px solid #87A9B3;
 width: 400px;
}

Formularfelder sehen wesentlich besser aus, wenn sie nicht als die üblichen hässlichen grauen Kästen erscheinen. Etwas Vorsicht ist jedoch geboten, da Benutzern Eingabefelder als eben solche bekannt sind. Anders gestaltete Formularfelder werden daher manchmal nicht auf Anhieb erkannt.

Eigenheiten von Netscape 4.7 | Wie nicht anders zu erwarten, kommt Netscape 4.7 mit CSS-Stilen für Formularfelder überhaupt nicht zurecht und nagelt die Felder einfach überlappend in das Dokument. Wenn Sie auch für diesen Browser optimieren möchten (oder müssen), richten Sie daher am besten eigens für diesen Browsertyp eine Tabellenlösung ein, auf die der Nutzer über eine Browserweiche geleitet wird.

Abbildung 16.12 Formular in Internet Explorer mit CSS

Abbildung 16.13 Formular in Netscape 4.7 mit CSS

Schritt für Schritt: Ein Kontaktformular für die Buchwebsite

Abbildung

Ein Kontaktformular soll die Daten aus Tabelle 16.1 an ein CGI auf dem Webserver übertragen. Das CGI existiert nur fiktiv.


Bezeichnung Variablenname Benötigt?

Vorname

vorname

ja

Name

name

ja

E-Mail-Adresse

email

ja

Website

url

nein

Nachricht

nachricht

ja

Tabelle 16.1 Angaben für die Überprüfung des Formulars


1 HTML-Dokument öffnen

Öffnen Sie das HTML-Dokument 7_0.htm. Dieses Dokument soll unser Kontaktformular werden.

2 Tabelle entfernen

Entfernen Sie in diesem Dokument zunächst die Tabelle im rechten Feld .

3 Formular einfügen

Fügen Sie in die nun leere Tabellenzelle ein Formular ein.

4 Tabelle einfügen

Achten Sie darauf, die in der Abbildung spezifizierte Tabelle in das Formular einzufügen. Klicken Sie dazu genau in den roten Rahmen des Formulars. In den Tabellenparametern wird eine Zellauffüllung von 1 Pixel angeben, damit die Formularfelder nicht direkt aneinander liegen.

5 Tabellen-ID zuweisen

Weisen Sie der eingefügten Tabelle gleich im Eigenschafteninspektor die ID EINGABE zu.

Diese erscheint nur im Eigenschafteninspektor, weil wir beim Anlegen der CSS-Definition einen ID-Selektor mit dieser Bezeichnung erstellten. (siehe Seite 199).

6 Formularfelder einfügen

Jetzt werden in die entsprechenden Tabellenzellen die Formularfelder wie abgebildet eingefügt.

7 Variablennamen vergeben

Wählen Sie anschließend die einzelnen Felder aus und benennen Sie diese mit den in der obigen Tabelle angegebenen Variablennamen. Sie können auch gleich die Beschriftungen einfügen.

8 Zellen verbinden

In der Tabellenreihe, in der sich das Textfeld für die »Nachricht« befindet, müssen die Tabellenzellen verbunden werden.

In der Abbildung sehen Sie das fertige Formular in der erweiterten Layoutansicht.

Wenn Sie an dieser Stelle angelangt sind, ist der Aufbau des statischen Teils der Website vollständig abgeschlossen. W



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Adobe Dreamweaver CS3
Die Neuauflage:
Adobe Dreamweaver CS3
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: Adobe Dreamweaver CC






 Adobe
 Dreamweaver CC


Zum Rheinwerk-Shop: Adobe Dreamweaver CC Einstieg






 Adobe Dreamweaver
 CC Einstieg


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern