Stil mit {stil}

Effizient und schlank: Formulare mit label-Tag und display: inline-block

display: none und display: block sind beliebte CSS-Eigenschaften … besonders für die allgegenwärtigen kleinen Animationen.

display: inline-block hingegen sehen wir eher selten in freier Wildbahn. Dabei ist es ein klasse Begleiter für das label-Tag in Formularen.

Die Gestaltung von Formularen mit CSS weist wenig Spielraum auf: Tabellen, Tabellen, Tabellen oder wahnsinnige CSS-Konstruktionen. Also kramen wir das label-Tag aus der Mottenkiste, tragen zur Barrierefreiheit bei und reduzieren mit der exotischen CSS-Eigenschaft inline-block auch gleich noch die Flut der Tags und CSS-Eigenschaften auf ein Minimum.

Die Eigenschaft inline-block wandelt ein Inline-Element in ein Block-Element um, für das eine Breite angegeben werden kann.

label { display: inline-block; width: 7em; }
…
<div><label for="vorn">Vorname</label>
   <input id="vorn" type="text" value="Leo" /></div>

und schon simuliert das label-Tag vor einem Eingabefeld eine Tabellenspalte – das aber ohne den Overhead an table-Tags, der bei der Strukturierung eines Formulars durch Tabellen in Kauf genommen werden muss.

Kommt ordentlich auf IE7, Firefox und Safari, iPhone und Google G1.

Wenn die Label des Formulars über die Eingabefelder gesetzt werden sollen, reicht schon ein einfaches

label { display: block }