CSS für Formulare: Label mit Stil für größere Eingabefelder

HTML label für barrierefreie Formulare
HTML label hilft bei Formularen auf kleinen Monitoren: Wenn das label-Tag nicht einfach vor das Eingabefeld gesetzt, sondern um input gelegt wird, vergrößert es die Touchfläche. HTML label trägt also zur Barrierefreiheit bei und reduziert die Flut der Tags und das CSS für Formulare 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 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.

Farbe
Anmerkungen

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

SITEMAP BLOG