Formulaire HTML: Select-Option vs Datalist-Option

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

Sélectionnez-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>

Considérez cela comme la différence entre une exigence et une suggestion. Pour l' selectélément, l'utilisateur doit sélectionner l'une des options que vous avez données. Pour l' datalistélément, il est suggéré à l'utilisateur de sélectionner l'une des options que vous avez données, mais il peut en fait 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 saisir l'un de vos choix, utilisez l' selectélément. Si l'utilisation peut entrer quoi que ce soit, utilisez l' datalistélément.

Edit 2: Trouvé cette friandise dans le HTML Living Standard : "Chaque élément option qui est un descendant de l'élément datalist ... représente une suggestion."

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 est vraiment la suivante: vaut-il mieux utiliser une saisie de texte de forme 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>comme 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 <datalist>texte alimentée a une seule chaîne pour le libellé d'affichage et l'envoi. Une boîte de sélection peut avoir une valeur d'envoi différente de l'étiquette d'affichage <option value='ie'>Internet Explorer</option>.
• Une zone de <datalist>texte alimentée ne prend pas en charge la <optgroup>balise pour organiser l'affichage.
• Vous ne pouvez pas restreindre un utilisateur à la liste des options <datalist>comme vous le pouvez avec un <select>.
• L' événement onchange fonctionne différemment. Sur un <select>élément, l'événement onchange est déclenché immédiatement lors de la modification, tandis qu'avec <input type="text"l'événement est déclenché après que l'élément perd le focus ou que l'utilisateur appuie sur Entrée.
• <datalist>a un support vraiment irrégulier sur les navigateurs. La façon d'afficher toutes les options disponibles est incohérente et les choses ne font qu'empirer à partir de là.

Le dernier point est vraiment le plus important à mon avis. Étant donné que vous DEVEZ avoir une solution de secours de saisie semi-automatique plus universelle, il n'y a presque aucune raison de se donner la peine de configurer un fichier <datalist>. De plus, tout branchement de saisie semi-automatique décent permettra de personnaliser l'affichage de vos options, ce qui <datalist>ne fonctionne pas. Si vous aviez <datalist>accepté des <li>éléments que vous pouviez manipuler comme vous le souhaitez, cela aurait été vraiment génial! Mais non.

Aussi, pour autant que je sache, la <datalist>recherche est une correspondance exacte depuis le début de la chaîne. Donc, si vous aviez <option value="internet explorer">et que vous recherchiez «explorateur», vous n'obtiendrez aucun résultat. La plupart des plugins à saisie semi-automatique rechercheront n'importe où dans le texte.

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

Datalist inclut la saisie semi-automatique et les suggestions de manière native, il peut également permettre à un utilisateur de saisir une valeur qui n'est pas définie dans les suggestions.

Sélectionner ne vous donne que des options prédéfinies que l'utilisateur doit sélectionner

La liste de données est une nouvelle balise HTML dans les navigateurs compatibles HTML5. Il est rendu sous forme de zone de texte avec une liste d'options. Par exemple pour la zone de texte Genre, il vous donnera des options en tant que Homme Femme lorsque vous tapez «M» ou «F» dans la zone de texte.

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

Pour répondre spécifiquement à une partie de votre question "Y a-t-il une situation dans laquelle il serait préférable d'utiliser l'un ou l'autre?", Envisagez un formulaire avec des sections répétitives. Si la section extensible contient de nombreuses selectbalises, le options doit être rendu pour chaque sélection, pour chaque ligne.

Dans un tel cas, j'envisagerais d'utiliser datalistavec input, car la même chose datalistpeut être utilisée pour n'importe quel nombre de inputs. Cela pourrait potentiellement économiser une grande quantité de temps de rendu sur le serveur et s'adapterait beaucoup mieux à n'importe quel nombre de lignes.

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

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

select est largement pris en charge par les navigateurs par rapport à datalist. Veuillez consulter cette page pour une prise en charge complète du navigateur de datalist -

Prise en charge du navigateur Datalist

Où comme select est pris en charge dans tous les navigateurs (depuis IE6 +, Firefox 2+, Chrome 1+, etc.)

C'est similaire à select, mais datalist a des fonctionnalités supplémentaires comme la suggestion automatique. Vous pouvez même taper et voir des suggestions au fur et à mesure que vous tapez.

L'utilisateur pourra également écrire des éléments qui ne figurent pas dans la liste.