Formulare

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Einführung

Ohne HTML-Formulare wäre es nicht möglich, sich über das Web auf seinem E-Mail- Konto einzuloggen, Bücher mit einem Mausklick zu bestellen oder über das Netz mit Aktien zu handeln. Obwohl Formulare heutzutage ein essenzieller Bestandteil des Webs sind, ist die Standarddarstellung durch Browser immer noch eher hässlich.

Die Standarddarstellung von Formularen besteht in der Regel aus abgekanteten Eingabe- und textarea-Feldern sowie aus langweiligen Buttons. Diese Art von "Look and Feel" ist für ein kleines Intranet oder eine kleine Website vielleicht gerade noch akzeptabel. Den Eindruck von Professionalität verleihen Sie Ihrem Projekt damit jedoch nicht.

Glücklicherweise lassen sich schon mit wenigen CSS-Regeln Formulare gestalten, die sich vom Rest unterscheiden. Dieses Kapitel gibt Ihnen die nötigen Techniken an die Hand, um direkt qualitativ hochwertige Formulare zu erstellen.

Sie werden lernen, welche Einstellungen für HTML-Eingabeelemente wie Buttons, Textbereiche und -felder möglich sind. Eine weitere Technik befasst sich damit, wie Sie einen Button so einrichten, dass ein Formular nur einmal abgeschickt werden kann, damit Benutzer nicht versehentlich mehrere Prozesse auf der Serverseite auslösen. Am Ende dieses Kapitels finden Sie zwei Designbeispiele: ein einfaches Login-Formular und ein langes tabellenbasiertes Registrierungsformular.

Hinweis:
Unter Stildefinitionen für Formularelemente finden Sie eine ausgezeichnete Ergänzung zu diesem Kapitel. Auf übersichtliche Weise werden hier die meisten visuellen CSS-Eigenschaften für Formularelemente und die Unterstützung durch zehn aktuelle Browser aufgelistet und erläutert.

  

• Den Leerraum um ein Formular herum anpassen
• Stildefinitionen für Eingabeelemente
• Verschiedene Stile für unterschiedliche Eingabeelemente des gleichen Formulars
• Stildefinitionen für textarea-Elemente
• Stildefinitionen für Aufklappmenüs und Auswahllisten
• Textfeld für Sucheinträge im Macintosh-Stil
• Stildefinitionen für Buttons
• Grafikbasierte Submit-Buttons
• Buttons, die nur einmal benutzt werden können
• Submit-Buttons, die wie einfacher HTML-Text dargestellt werden
• Einfache HTML-Textlinks als Submit-Buttons verwenden
• Ein Webformular ohne Tabellen
• Zweispaltige Formulare ohne Tabellen
• Eingabefelder hervorheben
• Benötigte Formularfelder hervorheben
• Tastaturkürzel in Webformularen hervorheben
• Zusammengehörende Formularelemente gruppieren
• Formulardaten wie bei einem Tabellenkalkulationsdokument eingeben
• Designbeispiel: ein Login-Formular
• Designbeispiel: ein Registrierungsformular

  

<< zurück

vor >>