Input mit Dropdown-Liste – eines der häufigsten Elemente von Webformularen. Es ermöglicht Benutzern, einen oder mehrere Werte aus einer vordefinierten Liste auszuwählen. Wenn der Benutzer auf das Eingabefeld klickt, wird eine Dropdown-Liste mit den verfügbaren Optionen geöffnet.
In diesem Artikel werden wir uns ansehen, wie Sie eine Dropdown-Eingabe mit HTML und CSS erstellen und Funktionalität mit JavaScript hinzufügen.
Das Erstellen einer input mit einer Dropdown-Liste ist eine ziemlich einfache Aufgabe. Zuerst müssen Sie ein input-Element mit dem Attribut type="text" erstellen. Dann müssen Sie ein select-Element hinzufügen, das die Optionen oder Auswahlmöglichkeiten enthält. Jede Option wird mit dem Option-Tag angegeben und hat ihren eigenen Wert, der beim Senden des Formulars verwendet wird. Zum Beispiel:
Nachdem Sie das Formular erstellt haben, können Sie mit dem Festlegen von Stilen für input und die Optionsliste mit CSS beginnen. Sie können beispielsweise die Breite und Höhe des Eingabefeldes ändern und die Farbe und das Hintergrundbild festlegen. Die Schaltfläche zum Öffnen der Liste kann auch nach Ihrem Geschmack gestylt werden. Dazu verwenden Sie normalerweise das Pseudo-Element ::after oder ::before und die Eigenschaften content und background-image.
Schließlich können Sie JavaScript verwenden, um Funktionalität hinzuzufügen. Sie können beispielsweise festlegen, dass das Textfeld mit dieser Option gefüllt wird, wenn Sie eine Option aus einer Liste auswählen. Dazu müssen Sie dem Änderungsereignis in der Liste einen Ereignishandler zuweisen. In diesem Handler erhalten wir den Wert der ausgewählten Option und setzen ihn auf den Wert des Textfelds. Beispielcode:
const select = document.querySelector('select'); const input = document.querySelector('input[type="text"]'); select.addEventListener('change', (event) => < input.value = event.target.value; >);
Wenn der Benutzer nun eine Option aus der Liste auswählt, wird ihr Wert automatisch im Textfeld angezeigt. Daher haben wir eine voll funktionsfähige input mit einer Dropdown-Liste erstellt, die in Ihren Webanwendungen verwendet werden kann.
Erstellen Sie ein Eingabefeld
Um ein Eingabefeld mit einer Dropdown-Liste zu erstellen, benötigen wir ein Tag . Dieses Tag ermöglicht es uns, ein Textfeld für Benutzereingaben zu erstellen.
Um eine Dropdown-Liste hinzuzufügen, müssen wir ein Attribut verwenden list. In diesem Attribut geben wir die ID des Elements an, das die Datenquelle für die Liste ist.
Um eine Liste mit Daten zu erstellen, benötigen wir ein Tag . Innerhalb dieses Tags verwenden wir Tags, um jedes Listenelement hinzuzufügen.
Als Ergebnis erhalten wir ein Textfeld, in dem der Benutzer Daten eingeben kann, und wenn Sie auf den Pfeil innerhalb des Feldes klicken, wird eine Dropdown-Liste mit Auswahlmöglichkeiten angezeigt.
Wir setzen das Attribut "list"
Um eine Dropdown-Liste in einem Element zu erstellen, müssen Sie das Attribut "list" verwenden. Mit dem Attribut "list" können Sie eine Element-ID angeben
