Objet array js L'objet Array (tableau) : définition et utilisation
Définition et utilisation Balise <datalist>
LES BALISES HTMLLa 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 <datalist> 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
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