Menu
Coddy logo textTech

Dropdowns

Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 43 von 60.

In HTML ist ein Dropdown-Menü eine Liste von Elementen, die angezeigt wird, wenn ein Benutzer auf ein Element klickt oder den Mauszeiger darüber bewegt. Dropdowns werden häufig verwendet, um eine Liste von Auswahlmöglichkeiten auf kompakte Weise darzustellen. Um ein Dropdown zu erstellen, verwendest du das Tag <select> zusammen mit <option>-Tags für die einzelnen Elemente.

Hier ist die grundlegende Syntax zum Erstellen eines Dropdowns in HTML:

<select name="dropdown">
	<option value="value1">Option 1</option>
	<option value="value2">Option 2</option>
	<option value="value3">Option 3</option>
</select>
  • <select>: Das Tag, das das Dropdown-Menü definiert.
  • name: Ein Attribut, das dem Dropdown-Menü einen Namen gibt, der verwendet wird, um den ausgewählten Wert beim Absenden des Formulars zu identifizieren.
  • <option>: Ein Tag, der ein Element in der Dropdown-Liste definiert.
  • value: Ein Attribut, das den mit der Option verknüpften Wert angibt. Dieser Wert wird an den Server gesendet, wenn das Formular übermittelt wird.
  • Option text: Der sichtbare Text, der für jede Option in der Dropdown-Liste angezeigt wird.

Hier ist ein Beispiel dafür, wie du ein Dropdown-Menü mit drei Optionen erstellst:

<select name="colors">
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
</select>

In diesem Beispiel haben wir ein Dropdown-Menü mit dem Namen "colors" und drei Optionen: Rot, Grün und Blau. 

challenge icon

Aufgabe

Einfach

Erstelle ein HTML-Dokument, das ein Formular mit einem Dropdown-Menü enthält. Das Formular sollte die folgenden Elemente enthalten:

  1. Ein Dropdown-Menü mit dem Namen „fruits“.
  2. Das Dropdown-Menü sollte vier Optionen mit den folgenden Werten und Texten enthalten:
  • Wert: „apple“, Text: „Apple“
  • Wert: „banana“, Text: „Banana“
  • Wert: „orange“, Text: „Orange“
  • Wert: „grape“, Text: „Grape“

Probier es selbst

<!DOCTYPE html>
<html>
    <body>
        <!-- Hier Code schreiben -->
    </body>
</html>
quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Grundlagen

Übe selbstständig: Web-Playground