web-dev-qa-db-fra.com

Formulaire HTML: Choix-Option vs Option Datalist

Je me demandais quelles sont les différences entre Select-Option et Datalist-Option. Existe-t-il une situation dans laquelle il serait préférable d’utiliser l’un ou l’autre? Un exemple de chacun suit:

Sélection-Option 

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Option Datalist 

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
html5html-selecthtml-formhtml-datalist
113
user928984

Pensez-y comme à la différence entre une exigence et une suggestion. Pour l'élément select, l'utilisateur doit sélectionner l'une des options fournies. Pour l'élément datalist, il est suggéré à l'utilisateur de sélectionner l'une des options que vous avez fournies, mais il peut en réalité entrer tout ce qu'il veut dans l'entrée. 

Edit 1: Donc, celui que vous utilisez dépend de vos besoins. Si l'utilisateur doit entrer l'un de vos choix, utilisez l'élément select. Si l'utilisation peut entrer quoi que ce soit, utilisez l'élément datalist.

Edit 2: trouvé cette information dans le HTML Living Standard : "Chaque élément d’option qui est un descendant de l’élément datalist ... représente une suggestion."

150
james.garriss

D'un point de vue technique, ils sont complètement différents. <datalist> est un conteneur abstrait d'options pour d'autres éléments. Dans votre cas, vous l'avez utilisé avec <input type="text" mais vous pouvez également l'utiliser avec des plages, des couleurs, des dates, etc. http://demo.agektmr.com/datalist/

Si vous l'utilisez avec la saisie de texte, en tant que type de saisie semi-automatique, la question qui se pose est la suivante: vaut-il mieux utiliser une entrée de texte libre ou une liste d'options prédéterminée? Dans ce cas, je pense que la réponse est un peu plus évidente.

Si nous nous concentrons sur l'utilisation de <datalist> en tant que liste d'options pour un champ de texte, voici quelques différences spécifiques entre cela et une zone de sélection:

  • Une zone de texte alimentée par <datalist> a une seule chaîne pour l'étiquette d'affichage et pour l'envoi. Une zone de sélection peut avoir une valeur de soumission différente par rapport à l'étiquette d'affichage <option value='ie'>Internet Explorer</option>. 
  • Une zone de texte alimentée par <datalist> ne prend pas en charge la balise <optgroup> pour organiser l'affichage.
  • Vous ne pouvez pas restreindre un utilisateur à la liste d'options d'un <datalist> comme vous pouvez le faire avec un <select>.
  • L'événement onchange fonctionne différemment. Sur un élément <select>, l'événement onchange est déclenché immédiatement lors d'une modification, alors qu'avec <input type="text", l'événement est déclenché après que l'élément ait perdu le focus ou que l'utilisateur ait appuyé sur entrée.
  • <datalist> ne supporte vraiment pas bien les navigateurs. La manière d'afficher toutes les options disponibles est incohérente et la situation ne fait qu'empirer.

Le dernier point est vraiment le grand à mon avis. Étant donné que vous DEVEZ bénéficier d'une solution de secours plus complète, elle n'a alors pratiquement aucune raison de vous empêcher de configurer un <datalist>. De plus, tout branchement correct d'auto-complétion permettra de styliser l'affichage de vos options, ce que <datalist> ne fait pas. Si <datalist> acceptait <li> éléments que vous pourriez manipuler comme vous le souhaitez, cela aurait été vraiment génial! Mais non.

Aussi, autant que je sache, la recherche <datalist> est une correspondance exacte depuis le début de la chaîne. Donc, si vous aviez <option value="internet Explorer"> et que vous recherchiez 'Explorer', vous n'obtiendriez aucun résultat. La plupart des plugins à complétion automatique effectueront une recherche n'importe où dans le texte.

J'ai seulement utilisé <datalist> comme aide pratique rapide et paresseux pour certaines pages internes où je sais avec une certitude à 100% que les utilisateurs ont le dernier Chrome ou Firefox, et n'essaieront pas de soumettre des valeurs fictives. Dans tous les autres cas, il est difficile de recommander l'utilisation de <datalist> en raison de la très mauvaise prise en charge du navigateur. 

51
mastaBlasta

Datalist inclut automatiquement les suggestions et la saisie semi-automatique, il peut également permettre à un utilisateur de saisir une valeur non définie dans les suggestions.

Sélectionnez uniquement les options prédéfinies que l'utilisateur doit sélectionner.

3
user3167654

La liste de données est une nouvelle balise HTML dans les navigateurs pris en charge par HTML5 . Elle s'affiche en tant que zone de texte avec une liste d'options . ou 'F' dans la zone de texte.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>
2
Deepak

Il existe une autre différence importante entre select et datalist. Voici le facteur de prise en charge du navigateur.

select est largement pris en charge par les navigateurs par rapport à datalist. Veuillez jeter un coup d'œil à cette page pour connaître le support complet de datalist--

Prise en charge du navigateur Datalist

Où as select est supporté efficacement par tous les navigateurs (depuis IE6 +, Firefox 2+, Chrome 1+, etc.)

0
neophyte

J'ai remarqué qu'il n'y a pas de fonctionnalité sélectionnée dans Datalist. Il ne vous donne que le choix mais ne peut pas avoir une option par défaut. Vous ne pouvez pas non plus afficher l'option sélectionnée sur la page suivante.

0
kakugiki

Pour répondre spécifiquement à une partie de votre question "Existe-t-il une situation dans laquelle il serait préférable d’utiliser l’une ou l’autre?", Considérons un formulaire comportant des sections répétitives. Si la section répétitive contient plusieurs balises select, alors la options doit être restituée pour chaque sélection, pour chaque ligne.

Dans un tel cas, je considérerais d'utiliser datalist avec input, car le même datalist peut être utilisé pour un nombre quelconque de inputs. Cela pourrait potentiellement économiser beaucoup de temps de rendu sur le serveur et permettre une meilleure évolutivité sur un nombre quelconque de lignes.

0
Bruce Pierson