Input-Attribute
Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 37 von 60.
Hier sind einige weitere nützliche Attribute für Texteingaben:
placeholder: Gibt einen kurzen Hinweis, der den erwarteten Wert des Eingabefelds beschreibt (z. B. „Enter your name“).value: Legt den Anfangswert des Eingabefelds fest.maxlength: Gibt die maximale Anzahl der im Eingabefeld zulässigen Zeichen an.
Hier ist ein Beispiel dafür, wie man ein Texteingabefeld mit einem Platzhalter erstellt:
<input type="text" name="username" placeholder="Enter username">In diesem Beispiel haben wir ein Texteingabefeld mit dem Namen "username" und einem Platzhalter mit dem Text "Enter username". Wenn das Eingabefeld leer ist, wird der Platzhaltertext im Feld angezeigt. Sobald der Benutzer mit der Eingabe beginnt, verschwindet der Platzhaltertext.
Aufgabe
EinfachErstelle ein HTML-Dokument, das ein Formular mit den folgenden Texteingabefeldern enthält:
- Eine Texteingabe mit dem Namen "firstname" und einem Platzhalter mit dem Text "Enter your first name".
- Eine Texteingabe mit dem Namen "lastname" und einem Platzhalter mit dem Text "Enter your last name".
- Eine Texteingabe mit dem Namen "email" und einem Platzhalter mit dem Text "Enter your email". Lege die maximale Länge dieser Eingabe auf 50 Zeichen fest.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</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