Kursinhalt
Ultimatives HTML
Ultimatives HTML
Verwendung des Datalist-Elements für vordefinierte Eingabevorschläge
Das <datalist>
-Element in HTML wird verwendet, um eine vordefinierte Liste von Optionen für ein <input>
-Element zu erstellen. Es ermöglicht dem Benutzer, eine Option aus der Liste auszuwählen, bietet jedoch gleichzeitig die Möglichkeit, einen eigenen Wert einzugeben. Die Liste der vordefinierten Werte bleibt verborgen, bis der Benutzer beginnt, im zugehörigen Textfeld zu tippen. Das <datalist>
-Element wird mit einem id
-Attribut versehen, und das <input>
-Element wird über das list
-Attribut damit verknüpft.
index.html
Insgesamt kann das <datalist>
-Element eine hilfreiche Möglichkeit sein, Benutzern eine vordefinierte Auswahlliste bereitzustellen und ihnen dennoch die Flexibilität zu geben, bei Bedarf einen eigenen Wert einzugeben.
Beispiel
Wenn der Benutzer beginnt, im Eingabefeld category zu tippen, zeigt der Browser die vordefinierten Kategorien aus der datalist
an. Falls keine der Optionen zur Eingabe des Benutzers passt, kann dennoch eine eigene Kategorie eingegeben werden. Dies ermöglicht es dem Benutzer, aus einer Liste auszuwählen oder bei Bedarf einen eigenen Wert einzugeben.
index.html
<label for="category">
: kennzeichnet das Eingabefeld und zeigt dem Benutzer an, dass eine Produktkategorie ausgewählt oder eingegeben werden soll;<input type="text" name="category" id="category" list="categories"/>
: das Eingabefeld, in das der Benutzer entweder eine Kategorie eingeben oder aus den verfügbaren Optionen auswählen kann. Das Attributlist="categories"
verknüpft dieses Eingabefeld mit derdatalist
mit der IDcategories
;<datalist id="categories">
: enthält eine Liste vordefinierter Produktkategorien. Diese Optionen werden als Vorschläge angezeigt, sobald der Benutzer im Eingabefeld zu tippen beginnt;<option value="...">
: jedeoption
repräsentiert eine Produktkategorie in der Liste. Der Benutzer kann eine dieser Kategorien auswählen oder einen eigenen Wert eingeben, falls keine Option passt.
1. Welches HTML-Element wird verwendet, um eine Dropdown-Liste mit mehreren Optionen zu erstellen?
2. Welchen Zweck hat das datalist
-Element?
3. Welches Attribut wird verwendet, um ein datalist
-Element mit einem input
-Element zu verknüpfen?
Danke für Ihr Feedback!