Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Verwendung des Datalist-Elements für vordefinierte Eingabevorschläge | HTML-Formulare und Benutzereingaben
Ultimatives HTML
course content

Kursinhalt

Ultimatives HTML

Ultimatives HTML

1. Verständnis der Webentwicklung
3. HTML-Dokumentstruktur
4. Arbeiten mit Medien und Tabellen

book
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.

html

index.html

copy

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.

html

index.html

copy
  • <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 Attribut list="categories" verknüpft dieses Eingabefeld mit der datalist mit der ID categories ;

  • <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="..."> : jede option 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?

question mark

Welches HTML-Element wird verwendet, um eine Dropdown-Liste mit mehreren Optionen zu erstellen?

Select the correct answer

question mark

Welchen Zweck hat das datalist-Element?

Select the correct answer

question mark

Welches Attribut wird verwendet, um ein datalist-Element mit einem input-Element zu verknüpfen?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 9

Fragen Sie AI

expand
ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

course content

Kursinhalt

Ultimatives HTML

Ultimatives HTML

1. Verständnis der Webentwicklung
3. HTML-Dokumentstruktur
4. Arbeiten mit Medien und Tabellen

book
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.

html

index.html

copy

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.

html

index.html

copy
  • <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 Attribut list="categories" verknüpft dieses Eingabefeld mit der datalist mit der ID categories ;

  • <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="..."> : jede option 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?

question mark

Welches HTML-Element wird verwendet, um eine Dropdown-Liste mit mehreren Optionen zu erstellen?

Select the correct answer

question mark

Welchen Zweck hat das datalist-Element?

Select the correct answer

question mark

Welches Attribut wird verwendet, um ein datalist-Element mit einem input-Element zu verknüpfen?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 9
Wir sind enttäuscht, dass etwas schief gelaufen ist. Was ist passiert?
some-alt