Wiederholung - Formulare #2
Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 47 von 60.
Aufgabe
EinfachLass uns ein einfaches Registrierungsformular erstellen, genau wie das auf dem Bild unten!

Das solltest du einfügen:
- Ein
<form>-Tag, um alles zusammenzufassen. - Ein Benutzername-Feld mit einem Label und einer Texteingabe. Das Label sollte
"Username:"lauten und"username"verwenden. Die Eingabe sollteid="username",name="username",type="text"und den Platzhalter"Enter your username"enthalten. - Ein E-Mail-Feld mit einem Label und einer E-Mail-Eingabe. Das Label sollte
"Email:"lauten undfor="email"verwenden. Die Eingabe sollteid="email",name="email",type="email" und den Platzhalter"Enter your email"enthalten. - Ein Passwortfeld mit einem Label und einer Passworteingabe. Das Label sollte
"Password:"lauten undfor="userpassword"verwenden. Die Eingabe sollteid="userpassword",name="userpassword",type="password"und den Platzhalter"Enter your password"enthalten. - 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"sollteid="student",name="usertype",value="student"und ein Label mit dem Text"Student"haben. Das Optionsfeld"Teacher"sollteid="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. - 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"sollteid="sports",name="interests",value="sports"und ein Label mit dem Text"Sports"haben. Das Kontrollkästchen"Music"sollteid="music",name="interests",value="music"und ein Label mit dem Text"Music"haben. Das Kontrollkästchen"Technology"sollteid="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. - 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ächetype="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,nameundvalue.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</body>
</html>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-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