HTML-Tag <label>

❮ Vorige Nächste ❯

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:

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>

Versuch es selber!

Ergebnis

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>

Versuch es selber!

Ergebnis

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>

Versuch es selber!

Ergebnis

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>

Versuch es selber!

Ergebnis

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.