Menu
Coddy logo textTech

Input & Label

Lektion 2 von 7 im Kurs Login-Formular – HTML/CSS Projekt von Coddy.

Das <input>-Tag ist ein Container für verschiedene Arten von Eingabeelementen, wie zum Beispiel: Textfelder, Kontrollkästchen, Optionsfelder, Absendeschaltflächen usw.

Legen Sie den Typ mit dem type-Attribut fest,

<input type="text">
<input type="radio">
<input type="checkbox">
<input type="password">
<input type="submit">

Es ist eine gute Praxis, dem Input ein <label>-Tag hinzuzufügen,

<label for="password">Password:</label>
<input type="text" id="password">

Beachten Sie, dass das for-Attribut mit dem id-Attribut des Inputs übereinstimmen sollte, um sie miteinander zu verknüpfen.

challenge icon

Aufgabe

Einfach

Füge zwei input-Elemente mit Labels hinzu, mit den IDs "username" und "password", setze die Typen der Inputs auf "text" und "password" - vergiss nicht, jedes Label mit seinem Input zu verknüpfen.

Es wird empfohlen, <br/>-Tags hinzuzufügen, um Abstände zwischen allem zu schaffen!

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Write HTML code here -->
</body>
</html>

Alle Lektionen in Login-Formular – HTML/CSS Projekt