<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
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 :).
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:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details