Bestellformular erstellen per CSS

So gestalten Sie ein komplettes Bestellformular mit mehreren Abschnitten

Ersten Kommentar schreiben
Stand: 19. November 2008

Das Formular-HTML

Im Beitrag "Kontaktformular erstellen per CSS" haben Sie ein einfaches, voll funktionsfähiges Kontaktformular erstellt und dabei die wichtigsten Formularelemente kennen gelernt. Nun gehen Sie einen Schritt weiter und gestalten ein etwas komplexeres Bestellformular, das aus mehreren Abschnitten besteht.

Beispieldateien

Zum Üben und Selbermachen stehen Beispieldateien bereit. Das zip enthält zwei Ordner: In "basis" finden Sie die Übungsdateien, mit denen Sie unmittelbar anfangen können zu arbeiten. Dem Ordner "fertig" entnehmen Sie, wie das Ganze am Ende aussehen sollte. - Download Beispieldateien (.zip, 3 KB).

Bild vergrößernDas fertige Beispielformular

Formularlayout: Tabellen, div-Elemente und Listen

Für das Layout eines Formulars gibt es verschiedene Möglichkeiten. Besonders beliebt sind die folgenden drei Methoden, bei denen das eigentliche Formular zwecks Gestaltung um zusätzliche HTML-Elemente erweitert wird:

  • Tabellen: Beschriftung und Formularfeld in getrennten Zellen oder auch zusammen in einer Zeile. Tabellen können in einigen Situationen durchaus sinnvoll sein und, solange sie linearisierbar sind, sprich die Reihenfolge der Elemente ohne das Tabellengerüst Sinn ergibt, sogar vertretbar.

  • div-Elemente: Beschriftung und Formularelement werden in ein div gepackt und zusammen gestaltet. Diese Technik wurde für das einfache Kontakformular benutzt.

  • Listen: Das Formular wird als eine Auflistung von Paaren aus Beschriftung und Formularelementen interpretiert und entsprechend ausgezeichnet. Vorteil dieser Variante ist, dass beim Layouten jede Menge Elemente zur Verfügung stehen.

Zunächst werden Sie aber keine dieser gängigen Varianten einsetzen, sondern das Formular komplett ohne zusätzliche HTML-Elemente gestalten.

Schritt 1: Das HTML für das Formular

Im Beispielformular werden nur die wirklich benötigten Formularelemente eingesetzt und anschließend gestaltet:

  • Adress- und Bestelldaten werden jeweils mit fieldset gruppiert und mit legend beschriftet.

  • Alle Formularelemente bekommen eine ID und werden mit label beschriftet.

  • Beschriftungen, die nicht vor einem Element stehen, bekommen die Klasse .nofloat, die im CSS zur Gestaltung genutzt wird.

  • Das Sternchen zur Kennzeichnung eines Pflichtfelds steht in einem eigenen span mit der Klasse .pflichtfeld, damit sie bei Bedarf gestaltet werden können.

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

Inhalt

Downloads zu diesem Beitrag

Über den Autor:

bild117259

Peter Müller, Dozent und Autor, beschäftigt sich bereits seit 1995 mit dem Web und veröffentlichte zahlreiche Bücher rund um das Thema Webpublishing. Seine Erklärungen sind nicht ausschließlich für E ...

Newsletter abonnieren