Testen Sie Ihre Fähigkeiten: Grundlegende Steuerelemente

Das Ziel dieses Tests besteht darin zu überprüfen, ob Sie unseren Artikel zu Grundlegende native Formularsteuerelemente verstanden haben.

Hinweis: Sie können die 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 über einen unserer Kommunikationskanäle erreichen.

Grundlegende Steuerelemente 1

Diese Aufgabe führt Sie sanft ein, indem Sie gebeten werden, zwei <input>-Elemente für die ID und das Passwort eines Benutzers sowie eine Absenden-Schaltfläche zu erstellen.

  1. Erstellen Sie geeignete Eingaben für Benutzer-ID und Passwort.
  2. Sie sollten diese auch semantisch mit ihren Textbeschriftungen verknüpfen.
  3. Erstellen Sie eine Absenden-Schaltfläche innerhalb des verbleibenden Listenelements mit dem Schaltflächentext "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 es, funktionierende Sets von Checkboxen und Radiobuttons aus den bereitgestellten Textbeschriftungen zu erstellen.

  1. Verwandeln Sie den Inhalt des ersten <fieldset> in eine Gruppe von Radiobuttons – es sollte immer nur ein Charakterpony ausgewählt werden können.
  2. Sorgen Sie dafür, dass der erste Radiobutton 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 weitere Hotdog-Auswahlen 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 es, einen Datei-Auswahldialog zu erstellen.

  1. Erstellen Sie einen grundlegenden Datei-Auswahldialog.
  2. Erlauben Sie dem Benutzer, mehrere Dateien gleichzeitig auszuwählen.
  3. Der Datei-Auswahldialog sollte nur JPG- und PNG-Bilder 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.