Testen Sie Ihre Fähigkeiten: Grundlegende Steuerelemente

Das Ziel dieses Fähigkeitstests ist es festzustellen, ob Sie unseren Artikel über die Grundlegenden nativen 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 uns in einem unserer Kommunikationskanäle erreichen.

Grundlegende Steuerelemente 1

Diese Aufgabe startet sanft, indem Sie gebeten werden, zwei <input>-Elemente für die Benutzer-ID und das Passwort zu erstellen, zusammen mit einer Absendetaste.

  1. Erstellen Sie geeignete Eingabefelder für die Benutzer-ID und das Passwort.
  2. Sie sollten diese auch semantisch mit ihren Textetiketten verknüpfen.
  3. Erstellen Sie eine Absendetaste im verbleibenden Listenelement, mit dem Text "Log in" auf der Taste.

Versuchen Sie, den Live-Code unten 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, dass Sie funktionierende Sets aus Checkboxen und Optionsfeldern aus den bereitgestellten Textetiketten erstellen.

  1. Verwandeln Sie den Inhalt des ersten <fieldset> in eine Gruppe von Optionsfeldern — Sie sollten nur einen Ponycharakter gleichzeitig auswählen können.
  2. Stellen Sie sicher, dass das erste Optionsfeld beim Laden der Seite ausgewählt ist.
  3. Verwandeln Sie den Inhalt des zweiten <fieldset> in eine Gruppe von Checkboxen.
  4. Fügen Sie ein paar zusätzliche Hotdog-Auswahlmöglichkeiten hinzu.

Versuchen Sie, den Live-Code unten 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, dass Sie einen Dateiauswahldialog erstellen.

  1. Erstellen Sie einen einfachen Dateiauswahldialog.
  2. Erlauben Sie dem Benutzer, mehrere Dateien gleichzeitig auszuwählen.
  3. Stellen Sie sicher, dass der Dateiauswahldialog nur JPG- und PNG-Bilder akzeptiert.

Versuchen Sie, den Live-Code unten 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.