Testen Sie Ihre Fähigkeiten: Grundlegende Steuerelemente

Das Ziel dieses Fähigkeitstests ist es zu beurteilen, ob Sie unseren Artikel Grundlegende native Formularsteuerelemente 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.

Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.

Grundlegende Steuerelemente 1

Diese Aufgabe beginnt ganz sanft, indem Sie aufgefordert werden, zwei <input>-Elemente zu erstellen, eines für die Benutzer-ID und eines für das Passwort, zusammen mit einem Absende-Button.

  1. Erstellen Sie geeignete Eingaben für Benutzer-ID und Passwort.
  2. Sie sollten diese auch semantisch mit ihren Textlabels verknüpfen.
  3. Erstellen Sie einen Absende-Button innerhalb des verbleibenden Listenelements mit dem Button-Text "Log in".

Versuchen Sie, den folgenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Startpunkt 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, dass Sie funktionierende Gruppen von Checkboxen und Radiobuttons erstellen, basierend auf den bereitgestellten Textlabels.

  1. Wandeln Sie den Inhalt des ersten <fieldset> in eine Gruppe von Radiobuttons um – es sollte jeweils nur ein Pony-Charakter ausgewählt werden können.
  2. Sorgen Sie dafür, dass der erste Radiobutton beim Laden der Seite ausgewählt ist.
  3. Wandeln Sie den Inhalt des zweiten <fieldset> in eine Gruppe von Checkboxen um.
  4. Fügen Sie ein paar weitere Hotdog-Optionen Ihrer Wahl hinzu.

Versuchen Sie, den folgenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Startpunkt 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 es, einen Dateiauswähler zu erstellen.

  1. Erstellen Sie einen grundlegenden Dateiauswähler.
  2. Erlauben Sie dem Benutzer, mehrere Dateien gleichzeitig auszuwählen.
  3. Der Dateiauswähler sollte nur JPG- und PNG-Bilder akzeptieren.

Versuchen Sie, den folgenden Live-Code zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Startpunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.