Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

<label> - anklickbare Beschriftung

Um nicht nur ein Feld oder eine Radio-Button, sondern zusätzlich die Beschriftung anklickbar zu machen, eignet sich der HTML-TAG <label> wunderbar.

Zum Testen bitte einfach im folgenden Formular auf Vorname bzw. Nachname klicken.



Dies ist für Textfelder wie auch Auswahlfelder mit RADIO-Buttons und Checkboxen eine gute Möglichkeit, um dem Besucher mehr Komfort zu bieten.

Als Beispiel kann hier die Anrede durch Anklicken des Textes ausgewählt werden. Natürlich klappt auch weiterhin die Auswahl über den direkten Klick auf den RADIO-Button selber.

Und als Quellcode sieht das dann wie folgt aus:

<label for="maenlich">Herr</label>
<input type="radio" name="anrede" id="maenlich" value="m">

<label for="weiblich">Frau</label>
<input type="radio" name="anrede" id="weiblich" value="w">

Damit der Browser weiß, was zusammengehört wird über das Attribut for="eindeutigebezeichnung" innerhalb des dazugehörigen <label>-Feldes und dann im <input>-Feld id="eindeutigebezeichnung" die Verknüpfung geschaffen. Klick nun jemand auf die Schrift, wird das entsprechende Feld ausgewählt bzw. wie der Radio-Button gesetzt.

Tipp zu <label>: Schneller <label> einsetzen ohne for

Wenn der HTML-Befehl <label> um das <input>-Feld gesetzt wird, ist das Attribut for nicht mehr notwendig:

<label>Herr
  <input type="radio" name="anrede" id="maenlich" value="m">
</label>

Design über <label>

Ein weiterer Vorteil ist die Möglichkeit über CSS das Design zu erstellen. Beim folgenden Beispiel sehen wir, dass die Felder nicht untereinander sind, da natürlich das Wort „Vorname“ weniger Platz benötigt als das Wort „Nachname“.

Der entsprechende HTML-Code dazu:

<form action="formular.php">
<p>
  <label for="vorname">Vorname:</label> 
  <input type="text" id="vorname">
</p>
<p>
  <label for="nachname">Nachname:</label>
  <input type="text" id="nachname">
</p>
</form>

Jetzt können wir über CSS geschickt das Feld ansprechen. Damit wir sehen, welche Größen der Bereich von label annimmt, hinterlegen wir diesen mit der Hintergrundfarbe gelb.

label {
	background-color: yellow;
	width: 140px;
}

Damit die Breitenangabe der CSS-Anweisung width genutzt wird, muss aus dem Inline-Element <label> ein inline-block-Element werden:

label {
	background-color: yellow;
	width: 140px;
	display: inline-block;
}

Jetzt sieht man schön an dem gelben Hintergrund, wie Breit der Bereich für das <label> ist, welches auch auf der kompletten Breite anklickbar ist!

Möchte man ein Umbrechen von Beschriftung und Formularfeld vermeiden, ginge das über die CSS-Anweisung white-space: nowrap;

form p {
	white-space: nowrap;
}