Testen Sie Ihre Fähigkeiten: Andere Steuerelemente

Das Ziel dieses Fähigkeitstests ist es, zu überprüfen, 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 versuchen.

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

Andere Steuerelemente 1

In unserer ersten Bewertung zu "anderen Steuerelementen" werden wir Sie dazu bringen, ein mehrzeiliges Texteingabefeld zu erstellen.

  1. Erstellen Sie ein grundlegendes mehrzeiliges Texteingabefeld.
  2. Verknüpfen Sie es semantisch mit dem bereitgestellten "Kommentar"-Label.
  3. Geben Sie dem Eingabefeld 35 Spalten und 10 Zeilen Platz, um Kommentare hinzuzufügen.
  4. Begrenzen 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

Jetzt ist es Zeit, ein Dropdown-Auswahlmenü zu implementieren, damit ein Benutzer sein Lieblingsessen aus den bereitgestellten Optionen auswählen kann.

  1. Erstellen Sie die grundlegende Struktur der Auswahlliste.
  2. Verknüpfen Sie sie 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.

Andere Steuerelemente 3

In unserer letzten Aufgabe dieser Reihe beginnen wir mit fast derselben Liste von Essensauswahlmöglichkeiten. Dieses Mal wollen wir jedoch anders vorgehen:

  1. Erstellen Sie ein grundlegendes Texteingabefeld, das semantisch mit dem bereitgestellten Label verknüpft ist.
  2. Geben Sie die Essensauswahlmöglichkeiten in eine Liste ein, die mit einem Formulareingabefeld verknüpft werden kann.
  3. Verknüpfen Sie die Liste mit Ihrem Texteingabefeld, sodass beim Eintippen von Zeichen alle Listeneinträge, die mit der Zeichenfolge übereinstimmen, in einer Dropdown-Liste als Autovervollständigungsvorschläge 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.