Qu'est-ce que la balise <datalist> en HTML ?

Définition de la balise <datalist>

La balise <datalist> est un élément HTML qui permet de fournir une liste de suggestions prédéfinies pour un champ de formulaire <input>. Elle crée ce qu'on appelle une liste d'autocomplétion, offrant aux utilisateurs des options suggérées tout en leur permettant de saisir librement leur propre valeur.

Contrairement à la balise <select> qui impose un choix parmi des options prédéfinies, <datalist> combine la liberté d'un champ de texte avec la commodité d'une liste de suggestions. C'est un élément particulièrement utile pour améliorer l'expérience utilisateur dans vos formulaires. Si vous souhaitez maîtriser toutes les balises HTML et créer des formulaires professionnels, découvrez notre formation complète sur HTML.

Syntaxe de base

Pour utiliser la balise <datalist>, vous devez la lier à un élément <input> via l'attribut list. L'identifiant unique de votre <datalist> doit correspondre à la valeur de cet attribut.

<input type="text" list="suggestions" name="ville">
<datalist id="suggestions">
    <option value="Paris">
    <option value="Lyon">
    <option value="Marseille">
    <option value="Bordeaux">
    <option value="Lille">
</datalist>

Dans cet exemple, lorsque l'utilisateur clique sur le champ de saisie, une liste déroulante avec les villes suggérées apparaît. L'utilisateur peut soit choisir une option, soit taper sa propre ville.

Attributs de la balise <datalist>

La balise <datalist> elle-même accepte peu d'attributs spécifiques, mais elle fonctionne en combinaison avec les éléments <option> qui la composent.

Attributs des éléments <option>

Les éléments <option> à l'intérieur d'un <datalist> peuvent utiliser plusieurs attributs :

Exemples pratiques

Liste de suggestions pour un champ email

Vous pouvez suggérer des domaines email courants pour faciliter la saisie :

<label for="email">Adresse email :</label>
<input type="email" id="email" name="email" list="domaines-email">
<datalist id="domaines-email">
    <option value="@gmail.com">
    <option value="@outlook.com">
    <option value="@yahoo.fr">
    <option value="@orange.fr">
    <option value="@free.fr">
</datalist>

Lorsque l'utilisateur commence à taper son email, les suggestions de domaines apparaissent pour l'aider à compléter sa saisie plus rapidement.

Utilisation avec un label descriptif

Vous pouvez ajouter un texte descriptif à chaque option grâce à l'attribut label ou en ajoutant du texte entre les balises :

<label for="navigateur">Choisissez votre navigateur :</label>
<input type="text" id="navigateur" name="navigateur" list="navigateurs">
<datalist id="navigateurs">
    <option value="Chrome" label="Google Chrome - Le plus utilisé">
    <option value="Firefox" label="Mozilla Firefox - Open source">
    <option value="Safari" label="Apple Safari - Pour Mac">
    <option value="Edge" label="Microsoft Edge - Windows">
    <option value="Opera" label="Opera - Avec VPN intégré">
</datalist>

Datalist avec des valeurs numériques

La balise <datalist> fonctionne également avec les champs de type number ou range :

<label for="quantite">Quantité (suggestions) :</label>
<input type="number" id="quantite" name="quantite" list="quantites" min="1" max="100">
<datalist id="quantites">
    <option value="5">
    <option value="10">
    <option value="25">
    <option value="50">
    <option value="100">
</datalist>

Cette technique est particulièrement utile pour suggérer des valeurs courantes tout en permettant à l'utilisateur de saisir n'importe quel nombre dans la plage autorisée.

Datalist avec un champ range

Utilisé avec un input de type range, le <datalist> crée des repères visuels sur le curseur :

<label for="volume">Volume :</label>
<input type="range" id="volume" name="volume" min="0" max="100" list="niveaux">
<datalist id="niveaux">
    <option value="0" label="Muet">
    <option value="25" label="Faible">
    <option value="50" label="Moyen">
    <option value="75" label="Fort">
    <option value="100" label="Maximum">
</datalist>

Cette combinaison affiche des graduations sur le curseur, facilitant la sélection de valeurs spécifiques.

Datalist avec un champ de couleur

Vous pouvez même utiliser <datalist> avec un input de type color pour suggérer des couleurs prédéfinies :

<label for="couleur">Choisissez une couleur :</label>
<input type="color" id="couleur" name="couleur" list="palette">
<datalist id="palette">
    <option value="#FF5733">
    <option value="#33FF57">
    <option value="#3357FF">
    <option value="#FF33F5">
    <option value="#F5FF33">
</datalist>

Datalist dynamique avec JavaScript

Vous pouvez alimenter dynamiquement un <datalist> avec JavaScript, ce qui est idéal pour les suggestions basées sur une API :

<label for="pays">Rechercher un pays :</label>
<input type="text" id="pays" name="pays" list="liste-pays">
<datalist id="liste-pays"></datalist>

<script>
const input = document.getElementById('pays');
const datalist = document.getElementById('liste-pays');

const pays = ['France', 'Belgique', 'Suisse', 'Canada', 'Allemagne', 'Espagne', 'Italie', 'Portugal'];

input.addEventListener('input', function() {
    const valeur = this.value.toLowerCase();
    datalist.innerHTML = '';
    
    if (valeur.length > 0) {
        const suggestions = pays.filter(p => p.toLowerCase().includes(valeur));
        suggestions.forEach(suggestion => {
            const option = document.createElement('option');
            option.value = suggestion;
            datalist.appendChild(option);
        });
    }
});
</script>

Ce code filtre dynamiquement les suggestions en fonction de ce que l'utilisateur tape, créant une expérience d'autocomplétion personnalisée.

Différences entre <datalist> et <select>

Il est important de comprendre quand utiliser <datalist> plutôt que <select> :

Compatibilité navigateurs

La balise <datalist> est bien supportée par les navigateurs modernes, mais quelques différences existent :

Bonnes pratiques

Pour tirer le meilleur parti de la balise <datalist>, suivez ces recommandations :

1. Limitez le nombre d'options

Évitez de surcharger votre <datalist> avec trop d'options. Une liste de 5 à 15 suggestions est généralement idéale :

<!-- Bon : liste concise -->
<datalist id="langages">
    <option value="JavaScript">
    <option value="Python">
    <option value="PHP">
    <option value="Java">
    <option value="C++">
</datalist>

<!-- À éviter : liste trop longue -->
<datalist id="tous-les-langages">
    <!-- 200+ options... -->
</datalist>

2. Utilisez toujours un label associé

Pour l'accessibilité, associez toujours un <label> à votre champ input :

<label for="fruit">Votre fruit préféré :</label>
<input type="text" id="fruit" name="fruit" list="fruits">
<datalist id="fruits">
    <option value="Pomme">
    <option value="Orange">
    <option value="Banane">
</datalist>

3. Prévoyez une solution de repli

Pour les navigateurs qui ne supportent pas <datalist>, le champ input fonctionnera toujours normalement, sans suggestions. Vous pouvez également ajouter une solution de repli :

<input type="text" id="sport" name="sport" list="sports">
<datalist id="sports">
    <option value="Football">
    <option value="Tennis">
    <option value="Basketball">
    <!-- Texte de repli pour anciens navigateurs -->
    ou tapez votre sport favori
</datalist>

4. Validez côté serveur

N'oubliez jamais que <datalist> n'impose aucune restriction. L'utilisateur peut saisir n'importe quelle valeur. Validez toujours les données côté serveur :

<form action="/traitement" method="POST">
    <label for="taille">Taille du t-shirt :</label>
    <input type="text" id="taille" name="taille" list="tailles" required>
    <datalist id="tailles">
        <option value="XS">
        <option value="S">
        <option value="M">
        <option value="L">
        <option value="XL">
    </datalist>
    <button type="submit">Envoyer</button>
</form>

5. Utilisez des identifiants uniques

Si vous avez plusieurs <datalist> sur une même page, assurez-vous que chacun possède un id unique :

<input type="text" list="villes-depart" placeholder="Ville de départ">
<datalist id="villes-depart">
    <option value="Paris">
    <option value="Lyon">
</datalist>

<input type="text" list="villes-arrivee" placeholder="Ville d'arrivée">
<datalist id="villes-arrivee">
    <option value="Marseille">
    <option value="Nice">
</datalist>

Accessibilité

La balise <datalist> est généralement bien supportée par les technologies d'assistance, mais quelques points méritent attention :

• Associez toujours un <label> au champ input
• Utilisez l'attribut aria-describedby si vous ajoutez des instructions supplémentaires
• Les lecteurs d'écran annoncent généralement la présence de suggestions
• Testez avec différents lecteurs d'écran pour vous assurer d'une bonne expérience

<label for="metier">Votre métier :</label>
<input type="text" id="metier" name="metier" list="metiers" aria-describedby="metier-aide">
<span id="metier-aide">Commencez à taper pour voir les suggestions</span>
<datalist id="metiers">
    <option value="Développeur web">
    <option value="Designer UX">
    <option value="Chef de projet">
</datalist>

Questions fréquentes

Non, la balise <datalist> ne permet pas de forcer l'utilisateur à choisir une valeur parmi les suggestions. Si vous avez besoin de cette contrainte, utilisez plutôt la balise <select>. Vous pouvez cependant ajouter une validation JavaScript personnalisée pour vérifier si la valeur saisie fait partie de la liste.

Non, <datalist> fonctionne avec la plupart des types d'input textuels (text, email, url, tel, search), ainsi qu'avec number, range, color, date, time, et datetime-local. Cependant, il ne fonctionne pas avec les types checkbox, radio, file, hidden, password, image, submit, reset ou button.

Malheureusement, la balise <datalist> et ses suggestions sont très difficiles à styliser avec CSS car leur apparence est contrôlée par le navigateur. Vous ne pouvez pas personnaliser les couleurs, polices ou dimensions de la liste déroulante de manière fiable. Si vous avez besoin d'un contrôle total sur l'apparence, vous devrez créer un composant d'autocomplétion personnalisé en JavaScript.

Pour maîtriser la balise <datalist> et tous les autres éléments de formulaire HTML, nous vous recommandons de suivre notre formation HTML sur Believemy. Vous y apprendrez à créer des formulaires accessibles, ergonomiques et professionnels, avec de nombreux exemples pratiques et exercices.