HTML-Tabellen gestalten

Von der Wiege bis zur Bahre - Formulare, Formulare. Im analogen Alltag haben Formulare einen eher negativen Beiklang, im Web basieren alle Interaktionen mit dem Besucher darauf. Peter Müller erklärt, wie Sie ein einfaches Kontaktformular für Ihre Website erstellen, das Sie per CSS gestalten und mit dem Formular-Chef von nettz.de verschicken.

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, 16 kB).

Schritt 1: Das HTML für das Kontaktformular

Öffnen Sie die Beispielseite kontakt.html im Editor und fügen Sie im Textbereich unterhalb der h2-Überschrift "Kontakt" die folgenden Zeilen ein:

<form id="kontaktformular" name="kontaktformular" action="">
<div>
   <label for="absender">Ihre E-Mail-Adresse:</label>
   <input type="text" id="absender" name="absender" />
</div>
<div>
   <label for="nachricht">Ihre Nachricht: </label>
   <textarea id="nachricht" name="nachricht" 
    cols="20" rows="5"></textarea>
</div>
<div>
   <input type="submit" value="Abschicken" />
</div>
</form>

Dieser Quelltext erzeugt ein Formular mit einem einzeiligen Eingabefeld für die E-Mail-Adresse, einem mehrzeiligen Bereich für den Text und einer Schaltfläche zum Abschicken des Formulars. Nicht hübsch, aber alles da:

Das ungestaltete Formular

Fast alle Formularfelder haben sowohl eine ID (id="") als auch einen Namen (name="") mit identischen Werten. Die ID benötigen Sie für die Beschriftung mit label und zur Gestaltung per CSS, das Attribut name zur Auswertung der Formulardaten und für die JavaScript-Zeile (s. Schritt 3).

Label. Die Beschriftung der Formularfelder steht im Element label. Das Attribut for bezieht sich auf die ID des zu beschriftenden Formularfeldes, wodurch eine logische Verbindung zwischen Beschriftung und Formularfeld hergestellt wird.

Ein netter Nebeneffekt dieser Vorgehensweise ist, dass der Benutzer auf die Beschriftung klicken kann, um das Formularfeld zu aktivieren. Besonders bei Optionsfeldern und Kontrollkästchen ist das sehr praktisch. Da der Mauszeiger aber diese Möglichkeit nicht wie bei einem Link verändert, wenn er über dem Label schwebt, weiß das kaum ein Benutzer. Da werden Sie gleich bei der Gestaltung des Formulars ein klein wenig nachhelfen.

Textarea. Zwischen dem Anfangs-Tag <textarea ...> und dem Ende-Tag </textarea> sollte nichts stehen. Kein Leerzeichen, kein Zeilenumbruch, kein gar nichts. Viele Browser setzen den Cursor sonst beim Ausfüllen des Formulars nicht an den Anfang des Feldes, sondern mitten hinein, was ziemlich nerven kann.

Schritt 2: Das Formular per CSS gestalten

Mit ein paar einfachen CSS-Regeln gestalten Sie das Formular ein wenig ansprechender. Sie beginnen mit dem Formular selbst. Gestaltet werden Hintergrundfarbe, Breite, Polsterung und Rahmenlinie. Alles inzwischen schon fast alte Bekannte. Fügen Sie dazu am Ende des Stylesheets bildschirm.css im Abschnitt "3. Sonstige Styles" folgenden Style hinzu:

form {
   background-color: #eee; 
   width: 370px; /* Breite des Formulars */ 
   padding: 20px; 
   border: 1px solid #8c8c8c;
}

In der folgenden Regel geht es um die Gestaltung der Beschriftung. Dabei wird das Inline-Element label in diesem Formular zum Block-Element befördert, wodurch das Eingabefeld in eine neue Zeile rutscht und Sie für die Beschriftung so viel Platz haben, wie Sie benötigen.

Die zweite Deklaration cursor: pointer; bewirkt, dass der Mauszeiger wie bei einem Hyperlink zur Hand wird, wenn er über der Beschriftung schwebt. So merkt der Benutzer leichter, dass er klicken kann, um den Cursor in das Formularfeld zu platzieren:

form label { 
   display: block; /* Beschriftung auf eigener Zeile */
   cursor: pointer;  /* Mauszeiger wird zur Hand */ 
}

Das Eingabefeld input#absender für die E-Mail-Adresse und das Kommentarfeld textarea werden gemeinsam formatiert: 300 Pixel breit, mit einer dünnen Rahmenlinie und einem Außenabstand nach unten von 1em. Das Kommentarfeld bekommt in der nächsten Regel zusätzlich noch eine Höhe von 7em, sodass es bei einer Vergrößerung der Schriftart ebenfalls mehr Platz bietet.

input#absender, 
textarea { 
   width: 300px;
   border: 1px solid #8c8c8c;
   margin-bottom: 1em;
}
textarea { 
   height: 7em; 
}

Die letzte Regel weist den Formularfeldern mit der Pseudoklasse :focus eine Hintergrundfarbe zu, wenn der Benutzer etwas in das Formularfeld schreibt. Das funktioniert zwar nicht in allen Browsern, verursacht beim Nicht-Funktionieren aber keinerlei nachteilige Effekte:

input#absender:focus, 
textarea:focus {
   background-color: #d9d9d9; 
}

So sieht das Formular jetzt aus:

Das gestaltete Formular

Formularfelder gestalten per CSS

Formularfelder, wie Optionsfelder, Kontrollkästchen und Dropdown-Listen, werden automatisch vom Browser erzeugt und dieselben CSS-Anweisungen haben zum Teil sehr unterschiedliche Auswirkungen. Der Beitrag bei CSS4You.de bietet einen schönen Einblick in die Problematik.

HTML-Formulare gestalten per CSS