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 früher bei der Strukturierung eines Formulars durch Tabellen in Kauf genommen werden musste.
HTML label für Formulare
Mit label { display: inline-block} bricht der Label-Text auf kleinen Monitoren automatisch um, sobald der Raum für das Nebeneinander von Label-Text und Eingabefeld nicht mehr reicht.
Wenn die Label-Texte des Formulars generell über die Eingabefelder gesetzt werden sollen, reicht einfach
label { display: block }
Tipp: HTML label für große touch-Flächen
Auf den Monitoren der mobilen Geräte – auf dem Smartphone genauso wie auf Tabletts – sind die Buttons der Formulare zu klein. Die kleinen Radio-Buttons lassen sich ohne Overlays per Javascript / jQuery UI nicht vergrößern: Auf dem Handy werden sie zu Mikropünktchen.
Packt man aber das input-Tag in ein label-Tag ein und gibt dem label-Tag mit CSS ein großzügiges padding, vergrößert sich die touch-Fläche für den Radio-Button oder die Checkbox.
HTML Markup für label und input
<label><input type="radio" name="wo" value="hier" /> Hier</label> <label><input type="radio" name="wo" value="da" /> Da</label> <label><input type="radio" name="wo" value="dort" /> Dort</label>
CSS für label
label { padding: 12px; background: #efefef; cursor: pointer; }
Wenn das label-Tag das input-Tag einwickelt oder ummantelt, braucht label kein for-Attribut.
Label für große Checkboxen und Radio-Buttons
HTML label ist darüber hinaus eine einfache Technik, um die kleinen Radio-Buttons und Checkboxen benutzerfreundlicher – sprich vor allem größer und farbig – zu gestalten. Schon der Klick auf das label-Element toggelt den Zustand der Checkbox oder des Radio-Buttons.
Dieses Verhalten kann man für eine größere Ausgabe von Checkboxen und Radio-Buttons nutzen.
Das CSS für die großen Checkboxen und Radio-Buttons ist frei von appearance und gleich in allen Browsern: label – Formularfelder kennzeichnen
