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.

  1. Erstellen Sie geeignete Eingabefelder für Benutzer-ID und Passwort.
  2. Diese sollten auch semantisch mit ihren Textlabels verknüpft sein.
  3. 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.

  1. 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.
  2. Stellen Sie sicher, dass das erste Optionsfeld beim Laden der Seite ausgewählt ist.
  3. Wandeln Sie die Inhalte des zweiten <fieldset> in eine Gruppe von Kontrollkästchen um.
  4. 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.

  1. Erstellen Sie einen grundlegenden Dateiauswähler.
  2. Erlauben Sie dem Benutzer, mehrere Dateien gleichzeitig auszuwählen.
  3. 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.