Menu
Coddy logo textTech

Wiederholung - Formulare #2

Teil des Abschnitts Fundamentals 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!

Beispiel eines Registrierungsformulars

Hier ist, was enthalten sein soll:

  1. Ein <form>-Tag, um alles zusammenzufassen.
  2. Ein Benutzername-Feld mit einem Label und einem Text-Input. Das Label sollte "Username:" anzeigen und for="username" verwenden. Der Input sollte id="username", name="username", type="text" und den Platzhalter "Enter your username" haben.
  3. Ein E-Mail-Feld mit einem Label und einem E-Mail-Input. Das Label sollte "Email:" anzeigen und for="email" verwenden. Der Input sollte id="email", name="email", type="email" und den Platzhalter "Enter your email" haben.
  4. Ein Passwort-Feld mit einem Label und einem Passwort-Input. Das Label sollte "Password:" anzeigen und for="userpassword" verwenden. Der Input sollte id="userpassword", name="userpassword", type="password" und den Platzhalter "Enter your password" haben.
  5. Eine Gruppe von Radio-Buttons, damit Benutzer ihren Typ auswählen können: "Student" oder "Teacher". Füge einen Absatz oder eine Überschrift mit dem Text "User Type:" über den Radio-Buttons hinzu. Der "Student" Radio-Button sollte id="student", name="usertype", value="student" und ein Label mit dem Text "Student" haben. Der "Teacher" Radio-Button sollte id="teacher", name="usertype", value="teacher" und ein Label mit dem Text "Teacher" haben. Denke daran: Beide Radio-Buttons müssen das gleiche name-Attribut ("usertype") haben, damit nur einer gleichzeitig ausgewählt werden kann.
  6. Eine Gruppe von Checkboxen, damit Benutzer ihre Interessen wählen können: "Sports", "Music" und "Technology". Füge einen Absatz oder eine Überschrift mit dem Text "Interests:" über den Checkboxen hinzu. Die "Sports" Checkbox sollte id="sports", name="interests", value="sports" und ein Label mit dem Text "Sports" haben. Die "Music" Checkbox sollte id="music", name="interests", value="music" und ein Label mit dem Text "Music" haben. Die "Technology" Checkbox sollte id="technology", name="interests", value="technology" und ein Label mit dem Text "Technology" haben. Denke daran: Alle Checkboxen sollten das gleiche name-Attribut ("interests") haben, da sie zur selben Gruppe gehören.
  7. Ein Sign Up Button und ein Clear Button am Ende des Formulars. Der Sign Up Button sollte type="submit" haben und der Clear Button sollte type="reset" haben. Der Sign Up Button sollte den Text "Sign Up" anzeigen und der Clear Button sollte den Text "Clear" anzeigen.

Achte darauf, die richtigen Labels und Titel für eine benutzerfreundliche Erfahrung einzufügen!

Denke daran, dass die Inputs diese wichtigen Attribute enthalten sollten: type, id, name und value.

Probier es selbst

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

Alle Lektionen in Fundamentals