Testen Sie Ihre Fähigkeiten: Grundlegende Steuerelemente
Das Ziel dieses Fähigkeitstests ist es zu überprüfen, ob Sie unseren Artikel zu Grundlegenden nativen Formularsteuerelementen verstanden haben.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Sollten Sie Schwierigkeiten haben, können Sie uns in einem unserer Kommunikationskanäle kontaktieren.
Grundlegende Steuerelemente 1
Diese Aufgabe beginnt angenehm und fordert Sie auf, zwei <input>
-Elemente für die Benutzer-ID und das Passwort sowie eine Schaltfläche zum Absenden zu erstellen.
- Erstellen Sie geeignete Eingabefelder für Benutzer-ID und Passwort.
- Diese sollten auch semantisch mit ihren Textlabels verknüpft sein.
- Erstellen Sie eine Schaltfläche zum Absenden innerhalb des verbleibenden Listenelements mit dem Text "Log in".
Versuchen Sie, den untenstehenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Grundlegende Steuerelemente 2
Die nächste Aufgabe erfordert von Ihnen, funktionierende Sets von Kontrollkästchen und Optionsfeldern aus den bereitgestellten Textlabels zu erstellen.
- Wandeln Sie die Inhalte des ersten
<fieldset>
in eine Gruppe von Optionsfeldern um – es sollte immer nur ein Pony-Charakter gleichzeitig ausgewählt werden können. - Stellen Sie sicher, dass das erste Optionsfeld beim Laden der Seite ausgewählt ist.
- Wandeln Sie die Inhalte des zweiten
<fieldset>
in eine Gruppe von Kontrollkästchen um. - Fügen Sie ein paar weitere Hotdog-Optionen Ihrer Wahl hinzu.
Versuchen Sie, den untenstehenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Grundlegende Steuerelemente 3
Die letzte Aufgabe in diesem Set erfordert von Ihnen, einen Dateiauswähler zu erstellen.
- Erstellen Sie einen grundlegenden Dateiauswähler.
- Erlauben Sie dem Benutzer, mehrere Dateien gleichzeitig auszuwählen.
- Erlauben Sie dem Dateiauswähler, nur JPG- und PNG-Bilder zu akzeptieren.
Versuchen Sie, den untenstehenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.