Labels für Eingaben
Teil des Abschnitts Fundamentals der HTML-Journey von Coddy — Lektion 39 von 60.
Ohne eine Beschriftung ist es nicht immer ganz klar, worum es bei einer Eingabe geht. Eine Beschriftung gibt den Benutzern einen klaren visuellen Hinweis darauf, welche Art von Eingabe in diesem Feld erwartet wird. Beschriftungen werden mit dem <label>-Tag erstellt.
Hier ist die grundlegende Syntax:
<label for="field">Label text</label>
<input type="text" id="field"><label>: Das Tag, das die Beschriftung erstellt.
for: Eine Verknüpfung zwischen dem Label und einem Formularfeld. Der Wert vonforsollte mit deriddes Formularfelds übereinstimmen.
- Label-Text: Der Text, der beschreibt, wofür das Formularfeld gedacht ist.
<input>: Das Formularfeld, auf das sich die Beschriftung bezieht.
id: Die eindeutige Kennung für das Formularfeld, die mit demfor-Attribut im Label übereinstimmt.
Aufgabe
EinfachFüge die folgenden Tags innerhalb des <form>-Tags hinzu:
- Ein
<label>mit dem Text 'First Name:' und demfor-Attribut auf 'firstname' gesetzt. - Ein
<input>-Feld mittype="text". - Das
<input>-Feld sollte eineidhaben, die mit demfor-Attribut des Labels übereinstimmt.
Spickzettel
Labels bieten klare visuelle Hinweise für Formulareingaben unter Verwendung des <label> Tags:
<label for="field">Label text</label>
<input type="text" id="field">Das for Attribut im Label muss mit dem id Attribut des entsprechenden Eingabefeldes übereinstimmen, um eine korrekte Verbindung herzustellen.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<form>
<!-- Code hier schreiben -->
</form>
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Fundamentals
2Text und Formatierung
ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung8Formulare und Eingaben Teil 1
Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular11Event-Registrierungsseite
ProjektübersichtHeader-Bereich
Event-Details-BereichRegistrierungsformularFooter-Bereich6Seitenlayout
Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout9Formulare und Eingaben Teil 2
Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #212Abschlussherausforderungen
Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-Liste