Testen Sie Ihre Fähigkeiten: Andere Steuerelemente

Ziel dieses Fertigkeitstests ist es zu bewerten, ob Sie unseren Artikel Andere Formularkontrollen 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 über einen unserer Kommunikationskanäle erreichen.

Andere Steuerelemente 1

In unserer ersten Bewertung zu "anderen Steuerelementen" erstellen Sie ein Eingabefeld für mehrzeiligen Text.

  1. Erstellen Sie ein grundlegendes Eingabefeld für mehrzeiligen Text.
  2. Verknüpfen Sie es semantisch mit dem bereitgestellten "Kommentar"-Label.
  3. Geben Sie dem Eingabefeld 35 Spalten und 10 Zeilen Platz zum Hinzufügen von Kommentaren.
  4. Beschränken Sie die Kommentare auf eine maximale Länge von 100 Zeichen.

Um das Eingabefeld zu erstellen, aktualisieren Sie den HTML-Code im Editor unten:

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

Andere Steuerelemente 2

Nun ist es an der Zeit, ein Dropdown-Auswahlmenü zu implementieren, das einem Benutzer ermöglicht, sein Lieblingsessen aus den vorgegebenen Optionen auszuwählen.

  1. Erstellen Sie die Grundstruktur des Auswahlfeldes.
  2. Verknüpfen Sie es semantisch mit dem bereitgestellten "food"-Label.
  3. Teilen Sie die Auswahlmöglichkeiten in 2 Untergruppen auf — "mains" und "snacks".

Um das Menü zu erstellen, aktualisieren Sie den HTML-Code im Editor unten:

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

Andere Steuerelemente 3

In unserer letzten Aufgabe dieses Sets beginnen wir mit derselben Liste von Essensoptionen. Diesmal soll es jedoch anders laufen:

  1. Erstellen Sie ein grundlegendes Texteingabefeld, das semantisch mit dem bereitgestellten Label verknüpft ist.
  2. Setzen Sie die Essensoptionen in eine Liste, die mit einem Formulareingabefeld verknüpft werden kann.
  3. Verknüpfen Sie die Liste mit Ihrem Texteingabefeld, sodass beim Eintippen von Zeichen alle übereinstimmenden Listenoptionen als automatische Vervollständigungsvorschläge in einer Dropdown-Liste angezeigt werden.

Um das Eingabefeld zu erstellen, aktualisieren Sie den HTML-Code im Editor unten:

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