Das Tag <label> definiert ein Textfeld für das Tag <input>. Die Bezeichnung ist ein gewöhnlicher Text, wo der Benutzer das Formularelement auswählen kann. Es erleichtert die Verwendung des Formulars, da es nicht immer bequem ist, mit dem Cursor in die Formularelemente zu gelangen.

Syntax

Das Tag <label> wird gepaart verwendet, der Text wird zwischen den Start- (<label>) und Endtags (</label>) geschrieben.

Das Tag <label> Tag wird auch verwendet, um Tastaturkürzel zu definieren und zum aktiven Element wie Links zu springen.

Es gibt zwei Möglichkeiten, ein Textlabel und die Form, zu der es gehört, zuzuordnen:

  1. Setzen Sie den Bezeichner (id) innerhalb des Formularelements und geben Sie seinen Namen als das Attribut for für das Tag <label>.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <form>
      <label for="lfname">Vorname:</label> 
      <input id="lfname" name="fname" type="text" />
    </form>
  </body>
</html>

Ergebnis

label beispiel
  1. Platzieren Sie die Form im Element <label>.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <form>
      <label>Name
      <input id="User" name="Name" type="text" />
      </label>
    </form>
  </body>
</html>

Ergebnis

label beispiel

Beispiel (eine Form mit Checkbox)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>

Ergebnis

label beispiel

Verwenden Sie die CSS-Eigenschaft font, um das Element <label> zu gestalten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Ihr Name:</label>
      <input id="User" name="Name" type="text"/>
    </form>
  </body>
</html>

Ergebnis

label beispiel

Attribute

Attribut Wert Beschreibung
accesskey accesskey Es definiert den Hotkey, durch den man zur Beschriftung verbindetes Formelement (durch das Attribut for) übergehen kann.
for element_id Es definiert den Identifikator des Elements, zu dem die Beschriftung verbindet sein muss.
form form_id Es bestimmt die Form (Formen), mit der die Beschriftung verbindet sein wird. Dieses Attribut erlaubt Ihnen, verschiedene Beschriftungen im willkürlichen Abschnitt des Dokuments zu erstellen und vom Tag <form> unabhängig zu bleiben.
Dieses Element wurde von HTML-Specification entfernt.

Das Element <label> unterschtützt Globale Attribute und Globale Eventhandler.

Browser-Support

chrome edge firefox safari opera

Übe dein Wissen

Wofür wird das HTML-Tag <label> verwendet?
Finden Sie das nützlich?