oujood.com

  HTML La balise  <datalist> liste de données

Ce tutoriel explique comment utiliser la balise <datalist>, fournit un exemple d'utilisation, décrit ses attributs et parle de sa compatibilité avec les navigateurs.

chercher |

Définition et utilisation Balise <datalist>

LES BALISES HTML

La balise <datalist> spécifie une liste d'options prédéfinies pour un élément <input>.

La balise <datalist> est utilisée pour fournir une fonctionnalité « Saisie semi-automatique » sur les éléments <input>. Les utilisateurs verront une liste déroulante d'options prédéfinies ou qu'ils ont saisis.

Utilisez attribut list de l'élément <input> pour le lier avec un élément <datalist>.

Exemple d'utilisation

Supposons que nous voulions fournir une liste de suggestions à un champ de saisie pour les villes :

Exemple :       Copier le code

            <label for="ville">Ville :</label>
            <input list="villes" id="ville" name="ville">
            <datalist id="villes">
                <option value="Paris">
                <option value="Londres">
                <option value="New York">
                <option value="Tokyo">
            </datalist>
    

Dans cet exemple, le champ de saisie aura une liste déroulante avec les options de villes prédéfinies.

Exemple Un élément <input> avec des valeurs prédéfinies dans une <datalist> :

Exemple de formulaire avec la balise <datalist>

Exemple :       Copier le code

		<!DOCTYPE html>
		 <html lang="fr">
		 <head>
		 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
		 <title>html5 demo</title>
		</head>
		 <body>
		 <form action="demo_form.asp" method="get">
		 <input list="browsers" name="browser">
		 <datalist id="browsers">
		   <option value="Internet Explorer">
		   <option value="Firefox">
		   <option value="Chrome">
		   <option value="Opera">
		   <option value="Safari">
		 </datalist>
		 <input type="submit">
		 </form>
		<p><b>Note:</b> La balise &lt;datalist&gt; n'est pas prise
		en charge dans IE et safari.</p>
		</body>
		 </html>     

Dans cet exemple, vous pouvez sélectionner un navigateur à partir d'une liste déroulante qui propose des options prédéfinies. Une fois le navigateur sélectionné, vous pouvez soumettre le formulaire.

Appui de navigateur

Internet Explorer  Firefox  Opera  Google Chrome  Safari

La balise <datalist> est prise en charge par la plupart des navigateurs modernes, y compris Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, etc. Cependant, assurez-vous de vérifier la compatibilité avec les versions spécifiques des navigateurs que vous ciblez.

Différences entre HTML 4.01 et HTML5

La balise <datalist> est nouveau en HTML5.

Attributs globaux

La balise <datalist> prend également en charge les HTML attributs globaux.

Attributs de l'événement

La balise <datalist> prend également en charge les Attributs de l'événement au format HTML.

comparaison entre la balise <datalist> et la balise <select>

En effet. La balise `<datalist>` peut être utilisée à la place de la balise `<select>` dans certains cas pour fournir une liste de suggestions préétablies à un champ de saisie. Cela peut offrir une expérience utilisateur plus moderne et flexible dans certains contextes.

Comparons les deux approches :

1. **Balise `<select>`** : Cette balise crée une liste déroulante où l'utilisateur peut choisir une option parmi plusieurs. Les options sont visibles en permanence, mais l'utilisateur doit cliquer sur la liste pour voir les options et sélectionner celle qu'il souhaite.

Exemple :       Copier le code

<select name="browser">
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Firefox">Firefox</option>
    <option value="Chrome">Chrome</option>
    <option value="Opera">Opera</option>
    <option value="Safari">Safari</option>
</select>

2. **Balise `<datalist>`** : Cette balise permet également de fournir des options préétablies, mais elles apparaissent sous forme de suggestions au fur et à mesure que l'utilisateur tape dans le champ de saisie. Cela offre une expérience plus fluide pour l'utilisateur, car il peut voir les suggestions pendant la saisie sans avoir à ouvrir une liste déroulante.

Exemple :       Copier le code

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
~

En résumé, la balise `<datalist>` peut être une alternative plus moderne et conviviale à la balise `<select>` dans les cas où les suggestions dynamiques et la saisie semi-automatique sont préférées.


Retour à l'accueil du site

Par carabde 10 mars 2014



Voir aussi nos tutoriel :

Se connecter à une base de données

Se connecter à une base de données

MySQL selectionner des données

MySQL selectionner des données

Conditionnel if...else javascript

Conditionnel if...else js : Définition et utilisation de la condition if avec des exemples.