DruckversionFormular gestalten
Schritt 2: Das Formular gestalten
Die Gestaltung von Formularen gehört für Webautoren zu den eher unbeliebten Aufgaben. Eine der Ursachen dafür ist, dass Formularelemente ähnlich wie Grafiken zu den ersetzten ("replaced") Elementen gehören:
input, textarea oder select werden vom Browser durch vorgefertigte Bauteile ersetzt, deren Aussehen vom Betriebssystem des Rechners beeinflusst wird.
Ein rundes Optionsfeld ("radio button") sieht so auf einem Macintosh völlig anders aus als auf einem Windows-Rechner und in Opera wieder anders als im Internet Explorer. Aus diesem Grund haben Sie als Autor nur sehr wenig Einfluss auf das Aussehen der Formularfelder selbst.
Formularelemente nicht zu sehr gestalten
Roger Johansson zeigt anhand einiger schöner Beispiele, wie unterschiedlich sich je Betriebssystem und Browser die CSS-Formatierung von Formularelementen auswirken kann.
Zum Dauerbrennerthema "Gestalten von Formularelementen" gibt es außerdem einen lesenswerten Artikel von Eric Meyer.
Bei der Gestaltung eines Formulars geht es daher in erster Linie um die Übersichtlichkeit und Benutzerfreundlichkeit des Formulars und nicht so sehr um das Aussehen der Elemente selbst. Sie beginnen mit dem Formularelement und den beiden Fieldsets:
/* Das Formular selbst */
form#bestellung {
width: 600px;
background: #ffeda0;
color: black;
line-height: 2;
padding: 10px;
border: 1px solid #f3c600;
margin: 0;
}
/* Die Elementegruppen */
fieldset {
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
legend {
font-weight:bold;
color: black;
padding:0 10px;
border: none;
}Im Browser nimmt das Formular langsam Form an:
Bestellformular mit ein bisschen Farbe
Im nächsten Schritt wird die Beschriftung ausgerichtet.
