HTML <label>-Tag
Das <label>-Tag definiert eine Textbeschriftung für das <input>-Tag. Wenn man auf die Beschriftung klickt, wird das zugehörige Formularelement fokussiert oder aktiviert. Es verbessert die Benutzerfreundlichkeit von Formularen, da es nicht immer bequem ist, kleine Formularelemente mit dem Cursor präzise anzusteuern.
Das <label>-Tag wird auch verwendet, um Tastenkombinationen zum Fokussieren des zugehörigen Elements zu definieren.
Ein Eingabefeld kann mehreren Beschriftungen zugeordnet sein. Wenn Sie auf ein <label> klicken oder tippen, das mit einem Formularelement verknüpft ist, wird das daraus resultierende Klickereignis für das zugehörige Steuerelement ausgelöst.
Die Zuordnung eines <label> zu einem <input>-Element hat einige Vorteile:
- Der Beschriftungstext ist sowohl visuell als auch programmatisch mit dem Texteingabefeld verknüpft.
- Sie können auf die zugehörige Beschriftung klicken, um das Eingabefeld zu fokussieren oder zu aktivieren, ebenso wie auf das Eingabefeld selbst.
Syntax
Das <label>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<label>) und dem schließenden (</label>)-Tag geschrieben.
Es gibt zwei Möglichkeiten, eine Textbeschriftung mit dem Formularelement zu verknüpfen, zu dem sie gehört:
- Setzen Sie den Bezeichner (
id) innerhalb des<input>-Elements und geben Sie seinen Namen alsfor-Attribut für das<label>-Tag an.
Beispiel für das HTML <label>-Tag:
Beispiel für das HTML <label>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="lfname">First name:</label>
<input id="lfname" name="fname" type="text" />
</form>
</body>
</html>Ergebnis
- Fügen Sie das
<input>in das<label>-Element ein. Hinweis: Das Verschachteln des Inputs innerhalb des Labels wird aus Gründen der Barrierefreiheit und der Einfachheit des Codes im Allgemeinen bevorzugt.
Beispiel für das HTML <label>-Tag mit einem <input>-Element darin:
Ein Beispiel für das HTML <label>-Tag einschließlich des HTML <input>-Tags
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label>Name
<input id="User" name="Name" type="text" />
</label>
</form>
</body>
</html>Beispiel für ein HTML <form> mit einem <label>-Tag, das mit einem <input>-Tag vom Typ Radio verwendet wird:
Beispiel für das HTML <label>-Tag mit einem HTML <input>-Tag vom Typ Radio
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="barca">Barcelona</label>
<input type="radio" name="team" id="barca" value="Barcelona" />
<br />
<label for="real">Real Madrid</label>
<input type="radio" name="team" id="real" value="Real Madrid" />
<br />
</form>
</body>
</html>Beispiel für das HTML <label>-Tag mit CSS-Schrift-Eigenschaften:
Beispiel für das HTML <label>-Tag mit CSS-Schrift-Eigenschaften
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 20px;
}
label {
font-size: 20px;
font-weight: 700;
color: #1c87c9;
}
input {
width: 50%;
height: 28px;
padding: 4px 10px;
border: 1px solid #666;
background: #cce6ff;
color: #1c87c9;
font-size: 16px;
}
</style>
</head>
<body>
<form>
<label>Your Name:</label>
<input id="User" name="Name" type="text"/>
</form>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
accesskey | accesskey | Definiert eine Tastenkombination, um das zugehörige Formularelement zu fokussieren (navigiert nicht dorthin und springt nicht dorthin). |
for | element\_id | Legt die ID des Elements fest, an das das Label gebunden werden soll. |
form | form\_id | Gibt das/die Formular(e) an, mit dem/denen das Label verknüpft wird. Dieses Attribut ermöglicht es Ihnen, Tags an einer beliebigen Stelle im Dokument zu platzieren und nicht nur als Nachkommen des <form>-Elements. |
Das <label>-Element unterstützt außerdem die Global Attributes und die Event Attributes.
Beispiel für das form-Attribut:
<form id="myForm">
<input type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>So gestalten Sie ein HTML <label>-Tag
{
"tag_name": "label"
}Practice
What is the purpose of the HTML <label> tag?