Datalist en HTML
Avant, select imposait un choix fermé. Datalist est autre chose : vous tapez dans un input normal et le navigateur propose. Suggestion ou texte libre restent possibles.
Pourquoi datalist existe
Recherche, couleur et ville veulent des réponses courantes sans interdire le rare. select refuse hors liste ; un input vide n’aide pas. datalist comble l’écart : indices avec saisie libre.
Réponse directe
1) datalist avec option value. 2) list sur l’input = id. 3) label et name sur l’input — le datalist n’envoie pas. 4) Suggestion ou texte perso OK. 5) Utilisez select si la valeur doit être dans la liste seule.
📊 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 |
Démo suggestions navigateur
Champ Browser de Firefox à Safari. Taper Brave fonctionne — la liste ne bloque pas.
<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>
Lire la démo navigateur
- Le contrôle soumis est l’input
- list doit correspondre à id
- Chaque option value est une suggestion
- name clé la valeur de l’input
- label nomme le champ
- Contrairement à select, pas limité aux quatre noms
Suggestions de ville avec datalist
Deuxième extrait : suggérer des villes tout en permettant un village. Contrastez avec le select fermé précédent.
<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>
Lire la démo ville
- Même motif label et name
- list/id relie les indices
- Soumis = texte de l’input
- autocomplete=off optionnel
- Suite : accessibility plus large
Choisir datalist vs select vs input
- Ensemble fixe obligatoire : select
- Indices + texte libre : input + list + datalist
- Sans suggestion : input simple
- datalist ne remplace ni label ni name
- Ne nidez pas le datalist dans l’input ; liez par id
Pratique — brancher les suggestions
- Cinquième option Opera
- Cassez l’id puis corrigez
- Tapez un nom personnalisé
- Ajoutez Mashhad aux villes
- Refaites en select ; une phrase de différence
- Phrase : datalist suggère ; select restreint
- Nommage accessible dans la leçon suivante
Erreurs faciles
- list et id ne correspondent pas
- Attendre le refus du texte libre
- Oublier label
- Oublier name sur l’input
- name sur le datalist
- option vide sans value
- Mentalité select-seul sur champ libre
Résumé
- datalist + option value = suggestions pour input
- Associez list et id
- Taper hors liste est permis
- label et name sur l’input
- Utilisez select pour un choix fermé
- Suite : accessibility
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut