HTML Datalist
Zuvor erzwang select eine geschlossene Wahl. Datalist ist anders: Sie tippen in ein normales input, der Browser schlägt vor. Vorschlag oder freier Text sind erlaubt.
Warum datalist existiert
Suche, Lieblingsfarbe und Stadt brauchen häufige Antworten ohne Seltenes zu verbieten. select lehnt außerhalb ab; leeres input gibt keine Hinweise. datalist füllt die Lücke mit Vorschlägen bei freiem Tippen.
Direkte Antwort
1) datalist mit option value. 2) list am input = id. 3) label und name am input — datalist sendet nicht. 4) Vorschlag oder Eigenwert erlaubt. 5) select nutzen, wenn nur Listenwerte gelten.
📊 Datalist pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| datalist | Suggestion container | Hidden list of hints; not a visible form control alone |
| option (inside datalist) | One suggestion | Prefer value= for the hinted string |
| list (on input) | Points to datalist | Must equal the datalist’s id |
| id (on datalist) | Hook for list= | Unique on the page |
| input | Typed field that submits | Owns name=; suggestions are optional help |
| label | Accessible name | Still required — list suggestions are not a label |
| name (on input) | Submit key | What posts is whatever is in the input |
Browser-Vorschläge
Browser-Feld mit Firefox bis Safari. „Brave“ tippen funktioniert — die Liste sperrt nicht.
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers" placeholder="Type or choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Edge">
<option value="Safari">
</datalist>
Browser-Demo lesen
- Absendendes Steuerelement ist input
- list muss zur id passen
- Jede option value ist ein Vorschlag
- name schlüsselt den Input-Wert
- label benennt das Feld
- Anders als select: nicht auf vier Namen beschränkt
Stadt-Vorschläge mit datalist
Zweites Snippet: Städte vorschlagen, Dorfnamen tippen. Kontrast zum geschlossenen select der Vorschule.
<form action="/ship" method="post">
<label for="city">City</label>
<input id="city" name="city" list="cities" placeholder="Start typing a city" autocomplete="off">
<datalist id="cities">
<option value="Tehran">
<option value="Isfahan">
<option value="Shiraz">
</datalist>
<button type="submit">Continue</button>
</form>
Stadt-Demo lesen
- Gleiches label/name-Muster
- list/id verbindet Hinweise
- Submit = Text im input
- autocomplete=off optional
- weiter: breitere accessibility
Datalist vs select vs input
- Nur feste Menge: select
- Hinweise + Freitext: input + list + datalist
- Ohne Vorschläge: plain input
- datalist ersetzt weder label noch name
- Nicht in input nesten; per id koppeln
Übung — Vorschläge verdrahten
- Fünftes option Opera
- id absichtlich falsch, dann fixen
- Eigenen Namen tippen
- Mashhad zur Stadtliste
- Dieselben Städte als select; Satz zum Unterschied
- Satz: datalist schlägt vor; select beschränkt
- Benennung in nächster accessibility-Lektion
Typische Fehler
- list und id passen nicht
- Freitext-Ablehnung erwarten
- label vergessen
- name am input vergessen
- name an datalist
- leere option ohne value
- nur-select-Denken bei Freifeld
Zusammenfassung
- datalist + option value = Vorschläge für input
- list und id koppeln
- Tippen außerhalb erlaubt
- label und name am input
- select für geschlossene Wahl
- weiter: accessibility
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt