Formulaire HTML: Select-Option vs Datalist-Option

136

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>
user928984
la source
11
Parce que le HTML5 dit spécifiquement que les attributs sans guillemets
james.garriss
1
Quelqu'un sait pourquoi nous ne optionfermons pas la balise dans l'option datalist-option? Sublime semble vouloir
Johnny Metz
1
@ johnny Metz Vous pouvez fermer le tag mais il peut se fermer automatiquement, vous pouvez également faire quelque chose comme ceci: code <input list = "browser" name = "browser"> <datalist id = "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> </datalist> codeLe résultat est étrange. Les datalists impriment la valeur dans la liste. Cette valeur devient alors la valeur du champ d'entrée.
Sarah M Giles
3
@JohnnyMetz, HTML 5 était, en partie, une réaction contre XHTML. Pour certains éléments, comme option, il n'est pas nécessaire d'avoir une étiquette de fermeture ou d'être à fermeture automatique. HTML 5! = XHTML.
james.garriss
2
La spécification dit: "Les balises de début et de fin de certains éléments normaux peuvent être omises." Il indique également: "La balise de fin d'un élément option peut être omise si l'élément option est immédiatement suivi d'un autre élément option, ou s'il est immédiatement suivi d'un élément optgroup, ou s'il n'y a plus de contenu dans l'élément parent." w3.org/TR/html/syntax.html#optional-tags
james.garriss

Réponses:

180

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."

james.garriss
la source
En outre, il a principalement [support partiel] (( caniuse.com/#feat=datalist ) dans les autres navigateurs, avec des bogues tels que les longues listes de données devenant non défilables, etc.
Govind Rai
Dans Chrome pour le moment, si des données sont saisies (tapées), il interdit de cliquer sur la flèche. Ce n'est probablement pas idéal dans la plupart des cas.
David
66

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.

mastaBlasta
la source
3
Excellente réponse !! Pouvez-vous expliquer votre deuxième point? Qu'entendez-vous par «groupes d'options pour organiser l'affichage»? Merci.
Govind Rai
afaik (en 2019, sur Chrome et Firefox), <datalist> correspond aux infixes (pas seulement aux préfixes). donc "taper" re "suggère à la fois" Firefox "et" Internet Explorer ".
sam boosalis
@GovindRai I recherche rapide de "élément optgroup" renvoie cette page du MDN toujours utile avec plus d'informations (et des exemples): developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
TylerH
J'ai testé sous Firefox 66 et Chrome 73 - en fait, les étiquettes de datalist correspondent n'importe où, donc par exemple si votre datalist contient des noms de pays, "ted" correspondra à "United States" et "United Kingdom".
Błotosmętek
5

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

user3167654
la source
2

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>
Deepak
la source
5
C'est vrai, mais cela donne une nouvelle information intéressante, à savoir que la saisie de la première lettre sélectionnera les éléments correspondants dans la liste.
james.garriss
1

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.

Bruce Pierson
la source
Si vous ne vous souciez pas de donner le choix à l'utilisateur, pourquoi vous embêter à utiliser une liste de données? Utilisez simplement un champ de texte à la place.
james.garriss
0

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.

Weihui Guo
la source
L'équivalent pour une entrée plus datalist serait de définir la valeur = "(option par défaut)" sur l'entrée elle-même. Pour une entrée avec type = "text", ce texte apparaîtra par défaut mais sera modifiable.
Bemisawa
0

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.)

néophyte
la source
0

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.

Viyaan Jhiingade
la source