Summary  
The chapter explains how to link text labels to form input elements by using the HTML `<label>` tag’s `for` attribute paired with the input’s `id`, improving accessibility and enabling automatic focus when the label is clicked.

General domain of usage  
Web forms


<u>Labels (`<label>`) sind unerlässlich, um Textbeschriftungen mit Formulareingabefeldern zu verknüpfen</u> und so die Zugänglichkeit und Benutzerfreundlichkeit zu verbessern. Es ist wichtig, dass **das `for`-Attribut des** `<label>`-**Tags mit dem** `id`-**Attribut des zugehörigen** `input`-**Elements übereinstimmt.** <br>**Beispiel**:
```html
<label for="username">Username:</label>
<input type="text" id="username" />
```
Im obigen Beispiel gilt:
- Wenn Sie auf das Label `Username:` klicken, wird automatisch das entsprechende Eingabefeld fokussiert;
- Das `label` und das `input` sind über die Attribute `for` und `id` miteinander verknüpft;
- Beide Attribute, `for` und `id`, haben denselben Wert (`username`).

Das Ausfüllen des Formulars wird erleichtert, indem den Eingabefeldern aus dem vorherigen Beispiel Beschriftungen hinzugefügt werden.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgICAgIDxsYWJlbCBmb3I9InRleHQtaW5wdXQiPkVudGVyIHlvdXIgbmFtZTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9InRleHQtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0icGFzc3dvcmQtaW5wdXQiPkVudGVyIHlvdXIgcGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0ibWFpbCI+RW50ZXIgeW91ciBlbWFpbDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJtYWlsIiAvPiA8YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9InBob25lIj5QaG9uZSBudW1iZXI6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRlbCIgaWQ9InBob25lIiAvPiA8YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9ImFnZSI+QWdlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIGlkPSJhZ2UiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0iY2hlY2tib3gtaW5wdXQiPkFncmVlIHdpdGggdGVybXMgYW5kIGNvbmRpdGlvbnM6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9ImNoZWNrYm94IiBpZD0iY2hlY2tib3gtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0icmFkaW8taW5wdXQiPlNlbGVjdCB5b3VyIGdlbmRlcjo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0icmFkaW8iIGlkPSJyYWRpby1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJmaWxlLWlucHV0Ij5VcGxvYWQgYSBmaWxlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJmaWxlIiBpZD0iZmlsZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJkYXRlLWlucHV0Ij5TZWxlY3QgYSBkYXRlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJkYXRlIiBpZD0iZGF0ZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJ0aW1lLWlucHV0Ij5TZWxlY3QgYSB0aW1lOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJ0aW1lIiBpZD0idGltZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJkYXRldGltZS1pbnB1dCI+TWFrZSBhbiBhcHBvaW50bWVudCBhdDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iZGF0ZXRpbWUtbG9jYWwiIGlkPSJkYXRldGltZS1pbnB1dCIgLz4KICAgIDwvZm9ybT4KICA8L2JvZHk+CjwvaHRtbD4=

Welches Attribut des `<label>`-Tags wird verwendet, um es mit einem bestimmten `<input>`-Element in einem Formular zu verknüpfen?

Welches Attribut fehlt beim Input-Element, das mit dem Label-Element verknüpft werden muss?

Strukturierte Webseiten mit HTML erstellen. Textinhalte, Links, Listen, Bilder, Tabellen und Formulare anlegen und alles mit semantischen Elementen zu einer vollständigen Seite organisieren.

Beschriftung von Formulareingaben

1. Welches Attribut des `<label>`-Tags wird verwendet, um es mit einem bestimmten `<input>`-Element in einem Formular zu verknüpfen?

2. Welches Attribut fehlt beim Input-Element, das mit dem Label-Element verknüpft werden muss?

Beschriftung von Formulareingaben

1. Welches Attribut des <label>-Tags wird verwendet, um es mit einem bestimmten <input>-Element in einem Formular zu verknüpfen?

2. Welches Attribut fehlt beim Input-Element, das mit dem Label-Element verknüpft werden muss?

1. Welches Attribut des `<label>`-Tags wird verwendet, um es mit einem bestimmten `<input>`-Element in einem Formular zu verknüpfen?