0Pricing
HTML Academy · Leçon

`Datalist` pour la saisie semi-automatique

Suggérez des valeurs de saisie avec l’élément `datalist`.

`Datalist` pour la saisie semi-automatique est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Qu’est-ce que datalist ?

L’élément <datalist> fournit une liste de suggestions prédéfinies pour un élément <input> :

<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->

datalist et select

Différence essentielle entre <datalist> et <select> :

  • datalist — texte libre et suggestions (l’utilisateur peut saisir n’importe quoi)
  • select — choix limité (l’utilisateur doit choisir dans la liste)

Utilisez datalist lorsque vous souhaitez suggérer des valeurs sans limiter la saisie.

Associer datalist à input

L’attribut list de <input> doit correspondre à l’id de <datalist> :

<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

datalist avec différents types de saisie

<datalist> fonctionne avec de nombreux types de saisie :

<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">

<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
  <option value="0">  <option value="25">
  <option value="50"> <option value="75"> <option value="100">
</datalist>

<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
  <option value="#0070f3">
  <option value="#e86f00">
</datalist>

label d’option dans datalist

Les options de datalist peuvent avoir un libellé visible et une valeur envoyée :

<datalist id="countries">
  <option value="US">United States</option>
  <option value="GB">United Kingdom</option>
  <option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
     value is submitted when the option is selected -->

Filtrer les suggestions

Le navigateur filtre les suggestions pendant la saisie de l’utilisateur :

  • L’algorithme de correspondance varie selon le navigateur
  • Certains recherchent au début ; d’autres n’importe où dans la chaîne
  • Vous ne pouvez pas contrôler le comportement de filtrage du navigateur
  • Pour un filtrage personnalisé, créez un composant d’autocomplétion personnalisé avec ARIA

datalist dynamique avec JavaScript

Mettez à jour dynamiquement les options de datalist :

<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>

<script>
document.getElementById('search-input').addEventListener('input', async function() {
  const query = this.value;
  const res = await fetch(`/api/search?q=${query}`);
  const items = await res.json();

  const dl = document.getElementById('suggestions');
  dl.innerHTML = items.map(item =>
    `<option value="${item.name}">`
  ).join('');
});
</script>

Accessibilité de datalist

Points d’accessibilité à prendre en compte pour datalist :

  • Les lecteurs d’écran annoncent les suggestions comme une liste
  • Les utilisateurs peuvent parcourir les suggestions avec les touches fléchées
  • La saisie accepte toujours du texte libre — assurez-vous que la validation le gère

Remarques sur la prise en charge par les navigateurs

La prise en charge de datalist par les navigateurs est bonne, mais comporte quelques particularités :

  • Chrome, Edge, Firefox : prise en charge complète
  • Safari : pris en charge à partir de Safari 12.1
  • Navigateurs mobiles : la plupart affichent les suggestions, mais l’interface varie
  • Testez toujours sur les navigateurs ciblés avant de vous appuyer sur datalist

Quand ne pas utiliser datalist

Datalist n’est pas idéal lorsque :

  • Vous avez besoin d’une validation stricte (l’utilisateur doit choisir dans la liste)
  • Vous avez besoin d’une mise en forme personnalisée des options (le navigateur contrôle entièrement l’apparence)
  • Vous avez besoin d’un regroupement (optgroup n’est pas pris en charge dans datalist)

Dans ces cas, utilisez un composant d’autocomplétion personnalisé avec ARIA et role="combobox".

datalist et champ de recherche

Comparez datalist à un champ de recherche avec autocomplétion :

<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
  <option value="HTML tutorial">
  <option value="HTML forms">
  <option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->

Vérification rapide

Comment associez-vous un input à son élément datalist ?

Récapitulatif : datalist

Points essentiels de datalist :

  • <datalist id> + <input list> — associés par correspondance entre id et list
  • L’utilisateur peut saisir librement du texte ou choisir une suggestion
  • Utilisez <select> lorsque le choix doit être limité
  • Fonctionne avec les types de saisie texte, intervalle, couleur et autres
  • Les suggestions sont filtrées pendant la saisie de l’utilisateur

Questions Fréquemment Posées

La leçon « `Datalist` pour la saisie semi-automatique » est-elle gratuite ?

Oui — le texte complet de « `Datalist` pour la saisie semi-automatique » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « `Datalist` pour la saisie semi-automatique » ?

Suggérez des valeurs de saisie avec l’élément `datalist`. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « `Datalist` pour la saisie semi-automatique » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Menus déroulants Select et option
  2. `Textarea` pour les saisies multilignes
  3. Groupes de cases à cocher et de boutons radio
  4. `Datalist` pour la saisie semi-automatique
← Retour à HTML Academy