Stil mit {stil}

Mar 2009

Formulare mit CSS gestalten

Klar strukturierte Formulare mildern die Abneigung beim Ausfüllen der langen Listen von Eingabefeldern. Gleichzeitig sollen Formulare barrierefrei auch für Benutzer mit Handicaps angeboten werden – dafür sorgt das label-Tag.

<form action="#" method="post">
  <fieldset>
    <legend>Formular ohne CSS</legend>
    <div><label for="vorn">Vorname</label><input id="vorn" type="text" value="Leo" /></div>
    <div><label for="name">Name</label><input id="name" type="text" value="Lupus" /></div>
    <div><label for="wahl">Farbe</label>
    <input type="radio" name="wahl" value="rot" /> Rot 
    <input type="radio" name="wahl" value="blau" /> Blau 
    <input type="radio" name="wahl" value="gelb" /> Gelb </div>
    <div><textarea cols="40" rows="4">Schreib uns doch mal was … </textarea></div>
  </fieldset>
</form>

Damit der Browser Formulare übersichtlicht anordnet, werden fast immer noch Tabellen benutzt, die den Quellcode des Formulars im wahrsten Sinne des Wortes überquellen lassen. Dabei ist das label-Tag mit etwas CSS der beste Ausgangspunkt für die Strukturierung des Formulars ohne jeglichen Overhead.

CSS-Eigenschaften für label

label { display: inline-block; width: 6em; }

display: inline-block; verwandelt das inline-Element label in ein Block-Element, aber ohne dass label zu einem Zeilenumbruch führt. So kann dem label-Element eine Breite zugewiesen werden und überlange Inhalte werden innerhalb der Breite des label-Elements umgebrochen.

Mit label kann das Formular in Spalten aufgebaut werden wie einst mit Tabellen – nur ohne den Aufwand, den die Platzierung von Formularelementen durch Tabellen mitbringt.

Das Schöne an der Gestaltung von Formularen mit label anstelle eines Tabellenlayouts: Wenn das Formular nicht mehr in Spalten dargestellt werden soll, wandelt die CSS-Eigenschaft display: block für label das label-Tag in ein Blockelement mit Zeilenumbruch um, das über dem jeweiligen Eingabefeld steht.

Schrift für Formulare

input, textarea { font: 0.86em/120% Tahoma, Arial, sans-serif; color: navy; }

Firefox und Internet Explorer 7 machen einen Unterschied zwischen Textfeldern und Eingabefeldern. textarea benutzt einen Monospace-Font, input wird mit einer Proportionalschrift angezeigt. So zeigen input und textarea unterschiedliche Schriftgrößen.

Außderdem übernimmt input die Schriftdeklaration aus body, während textarea beim Monospace-Font bleibt. Wenn eine CSS-Regel sowohl für die Schrift von input als auch von textarea definiert wird, zeigen die Felder dieselbe Größe und Schrift.

zurück zum Seitenanfang