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

Hier ist, was enthalten sein soll:
- Ein
<form>-Tag, um alles zusammenzufassen. - Ein Benutzername-Feld mit einem Label und einem Text-Input. Das Label sollte
"Username:"anzeigen und for="username"verwenden. Der Input sollteid="username",name="username",type="text"und den Platzhalter"Enter your username"haben. - Ein E-Mail-Feld mit einem Label und einem E-Mail-Input. Das Label sollte
"Email:"anzeigen undfor="email"verwenden. Der Input sollteid="email",name="email",type="email"und den Platzhalter"Enter your email"haben. - Ein Passwort-Feld mit einem Label und einem Passwort-Input. Das Label sollte
"Password:"anzeigen undfor="userpassword"verwenden. Der Input sollteid="userpassword",name="userpassword",type="password"und den Platzhalter"Enter your password"haben. - 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 sollteid="student",name="usertype",value="student"und ein Label mit dem Text"Student"haben. Der"Teacher"Radio-Button sollteid="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. - 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 sollteid="sports",name="interests",value="sports"und ein Label mit dem Text"Sports"haben. Die"Music"Checkbox sollteid="music",name="interests",value="music"und ein Label mit dem Text"Music"haben. Die"Technology"Checkbox sollteid="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. - Ein Sign Up Button und ein Clear Button am Ende des Formulars. Der Sign Up Button sollte
type="submit"haben und der Clear Button solltetype="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,nameundvalue.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</body>
</html>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-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