Testen Sie Ihre Fähigkeiten: Weitere Steuerelemente

Ziel dieses Fähigkeitstests ist es, zu bewerten, ob Sie unseren Artikel Andere Formularelemente 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.

Weitere Steuerelemente 1

In unserer ersten Bewertung zu "anderen Steuerelementen" sollen Sie ein mehrzeiliges Texteingabefeld erstellen.

  1. Erstellen Sie eine grundlegende mehrzeilige Texteingabe.
  2. Verknüpfen Sie es semantisch mit dem bereitgestellten "Kommentar"-Label.
  3. Geben Sie der Eingabe 35 Spalten und 10 Zeilen Platz, um Kommentare hinzuzufügen.
  4. Legen Sie eine maximale Länge von 100 Zeichen für die Kommentare fest.

Um die Eingabe 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.

Weitere Steuerelemente 2

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

  1. Erstellen Sie Ihre grundlegende Struktur für das Auswahlfeld.
  2. Verknüpfen Sie es semantisch mit dem bereitgestellten "Essen"-Label.
  3. Teilen Sie die Auswahlmöglichkeiten in der Liste in 2 Untergruppen auf — "Hauptgerichte" 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.

Weitere Steuerelemente 3

In unserer letzten Aufgabe dieses Sets beginnen wir mit fast derselben Liste von Essensmöglichkeiten. Diesmal wollen wir jedoch anders vorgehen:

  1. Erstellen Sie eine grundlegende Texteingabe, die semantisch mit dem bereitgestellten Label verknüpft ist.
  2. Setzen Sie die Essensmöglichkeiten in eine Liste, die mit einem Formularelement verknüpft werden kann.
  3. Verknüpfen Sie die Liste mit Ihrer Texteingabe, sodass beim Eingeben von Zeichen jede der Listenoptionen, die mit der Zeichenfolge übereinstimmen, in einer Dropdown-Liste als Autovervollständigungsvorschläge angezeigt werden.

Um die Eingabe 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.