Dropdowns
Teil des Abschnitts Fundamentals der HTML-Journey von Coddy — Lektion 43 von 60.
In HTML ist ein Dropdown-Menü eine Liste von Elementen, die erscheint, wenn ein Benutzer auf ein Element klickt oder mit der Maus darüber fährt. Dropdowns werden häufig verwendet, um eine Liste von Auswahlmöglichkeiten auf kompakte Weise darzustellen. Um ein Dropdown zu erstellen, verwenden Sie das <select>-Tag 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 zu identifizieren, wenn das Formular abgeschickt wird.
<option>: Ein Tag, das 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 in der Dropdown-Liste für jede Option erscheint.
Hier ist ein Beispiel dafür, wie man ein Dropdown-Menü mit drei Optionen erstellt:
<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.
Aufgabe
EinfachErstellen Sie ein HTML-Dokument, das ein Formular mit einem Dropdown-Menü enthält. Das Formular sollte die folgenden Elemente enthalten:
- Ein Dropdown-Menü mit dem Namen "fruits".
- Das Dropdown-Menü sollte vier Optionen mit den folgenden Werten und Texten haben:
- Wert: "apple", Text: "Apple"
- Wert: "banana", Text: "Banana"
- Wert: "orange", Text: "Orange"
- Wert: "grape", Text: "Grape"
Spickzettel
Um ein Dropdown-Menü in HTML zu erstellen, verwenden Sie das <select>-Tag mit <option>-Tags für die einzelnen Elemente:
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: Definiert das Dropdown-Menüname: Identifiziert das Dropdown-Menü, wenn das Formular abgeschickt wird<option>: Definiert jedes Dropdown-Elementvalue: Der Wert, der an den Server gesendet wird, wenn die Option ausgewählt ist- Optionstext: Der sichtbare Text, der im Dropdown-Menü angezeigt wird
Beispiel für ein Dropdown-Menü mit Farbauswahl:
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</body>
</html>Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Fundamentals
2Text und Formatierung
ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung8Formulare und Eingaben Teil 1
Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular11Event-Registrierungsseite
ProjektübersichtHeader-Bereich6Seitenlayout
Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout9Formulare und Eingaben Teil 2
Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #212Abschlussherausforderungen
Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-Liste