Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

<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="maennlich">Herr</label>
<input type="radio" name="anrede" id="maennlich" 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="maennlich" 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;
}

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe