Input-Attribute
Teil des Abschnitts Fundamentals der HTML-Journey von Coddy — Lektion 37 von 60.
Hier sind einige weitere nützliche Attribute für Texteingaben:
placeholder: Bietet einen kurzen Hinweis, der den erwarteten Wert des Eingabefeldes beschreibt (z. B. "Enter your name").value: Legt den initialen Wert des Eingabefeldes 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 der Aufschrift "Enter username". Wenn das Eingabefeld leer ist, wird der Platzhaltertext im Feld angezeigt. Sobald der Benutzer mit der Eingabe beginnt, verschwindet der Platzhaltertext.
Aufgabe
EinfachErstellen Sie ein HTML-Dokument, das ein Formular mit den folgenden Texteingabefeldern enthält:
- Ein Texteingabefeld mit dem Namen "firstname" und einem Platzhalter, der "Enter your first name" lautet.
- Ein Texteingabefeld mit dem Namen "lastname" und einem Platzhalter, der "Enter your last name" lautet.
- Ein Texteingabefeld mit dem Namen "email" und einem Platzhalter, der "Enter your email" lautet. Legen Sie die maximale Länge dieser Eingabe auf 50 Zeichen fest.
Spickzettel
Nützliche Attribute für Texteingaben:
placeholder: Bietet einen kurzen Hinweis, der den erwarteten Wert des Eingabefeldes beschreibtvalue: Legt den Anfangswert des Eingabefeldes festmaxlength: Gibt die maximale Anzahl der im Eingabefeld zulässigen Zeichen an
Beispiel für eine Texteingabe mit Platzhalter:
<input type="text" name="username" placeholder="Enter username">Der Platzhaltertext wird angezeigt, wenn das Eingabefeld leer ist, und verschwindet, sobald der Benutzer mit der Eingabe beginnt.
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 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