Menu
Coddy logo textTech

Wiederholung - Formulare #2

Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 47 von 60.

challenge icon

Aufgabe

Einfach

Lass uns ein einfaches Registrierungsformular erstellen, genau wie das auf dem Bild unten!

Das solltest du einfügen:

  1. Ein <form>-Tag, um alles zusammenzufassen.
  2. Ein Benutzername-Feld mit einem Label und einer Texteingabe. Das Label sollte "Username:" lauten und "username" verwenden. Die Eingabe sollte id="username", name="username", type="text" und den Platzhalter "Enter your username" enthalten.
  3. Ein E-Mail-Feld mit einem Label und einer E-Mail-Eingabe. Das Label sollte "Email:" lauten und for="email" verwenden. Die Eingabe sollte id="email", name="email", type="email" und den Platzhalter "Enter your email" enthalten.
  4. Ein Passwortfeld mit einem Label und einer Passworteingabe. Das Label sollte "Password:" lauten und for="userpassword" verwenden. Die Eingabe sollte id="userpassword", name="userpassword", type="password" und den Platzhalter "Enter your password" enthalten.
  5. Eine Gruppe von Optionsfeldern, über die Benutzer ihren Typ auswählen können: "Student" oder "Teacher". Füge oberhalb der Optionsfelder einen Absatz oder eine Überschrift mit dem Text "User Type:" hinzu. Das Optionsfeld "Student" sollte id="student", name="usertype", value="student" und ein Label mit dem Text "Student" haben. Das Optionsfeld "Teacher" sollte id="teacher", name="usertype", value="teacher" und ein Label mit dem Text "Teacher" haben. Denke daran: Beide Optionsfelder müssen dasselbe name-Attribut ("usertype") haben, damit immer nur eines ausgewählt werden kann.
  6. Eine Gruppe von Kontrollkästchen, über die Benutzer ihre Interessen auswählen können: "Sports", "Music" und "Technology". Füge oberhalb der Kontrollkästchen einen Absatz oder eine Überschrift mit dem Text "Interests:" hinzu. Das Kontrollkästchen "Sports" sollte id="sports", name="interests", value="sports" und ein Label mit dem Text "Sports" haben. Das Kontrollkästchen "Music" sollte id="music", name="interests", value="music" und ein Label mit dem Text "Music" haben. Das Kontrollkästchen "Technology" sollte id="technology", name="interests", value="technology" und ein Label mit dem Text "Technology" haben. Denke daran: Alle Kontrollkästchen sollten dasselbe name-Attribut ("interests") haben, da sie sich in derselben Gruppe befinden.
  7. Eine Registrieren-Schaltfläche und eine Löschen-Schaltfläche am Ende des Formulars. Die Registrieren-Schaltfläche sollte type="submit" und die Löschen-Schaltfläche type="reset" haben. Die Registrieren-Schaltfläche sollte den Text „Registrieren“ und die Löschen-Schaltfläche den Text „Löschen“ anzeigen.

Achte darauf, passende Labels und Titel einzufügen, damit die Bedienung benutzerfreundlich ist!

Denke daran: Die Eingaben sollten diese wichtigen Attribute enthalten: type, id, name und value.

Probier es selbst

<!DOCTYPE html>
<html>
    <body>
        <!-- Hier Code schreiben -->
    </body>
</html>

Alle Lektionen in Grundlagen

Übe selbstständig: Web-Playground