Labels für Eingaben
Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 39 von 60.
Ohne eine Beschriftung ist nicht immer ganz klar, worum es bei einer Eingabe geht. Eine Beschriftung gibt Nutzern einen klaren visuellen Hinweis darauf, welche Art von Eingabe in diesem Feld erwartet wird. Beschriftungen werden mit dem Tag <label> erstellt.
Hier ist die grundlegende Syntax:
<label for="field">Label text</label>
<input type="text" id="field"><label>: Das Tag, das das Label erstellt.
for: Eine Verknüpfung zwischen der Beschriftung und einem Formularfeld. Der Wert vonforsollte mit deriddes Formularfelds übereinstimmen.
- Beschriftungstext: Der Text, der beschreibt, wofür das Formularfeld vorgesehen ist.
<input>: Das Formularfeld, auf das sich das Label bezieht.
id: Die eindeutige Kennung für das Formularfeld, die mit demfor-Attribut im Label übereinstimmt.
Sobald sie verknüpft sind, setzt ein Klick auf den Labeltext den Cursor in das Eingabefeld (fokussiert es), wodurch Nutzer auch eine größere Fläche zum Klicken erhalten.
Aufgabe
EinfachFüge die folgenden Tags innerhalb des <form>-Tags hinzu:
- Ein
<label>mit dem Text 'First Name:' und demfor-Attribut, das auf 'firstname' gesetzt ist. - Ein
<input>-Feld mittype="text". - Das
<input>-Feld sollte einidhaben, das mit demfor-Attribut des Labels übereinstimmt.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<form>
<!-- Schreibe hier Code -->
</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 Grundlagen
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Übe selbstständig: Web-Playground