Formulaire HTML: Sélectionnez l'Option vs Datalist-Option

Je me demandais quelles sont les différences entre Sélectionnez l'Option et Datalist-Option. Est-il de la situation dans laquelle il serait préférable d'utiliser l'un ou l'autre? Un exemple de chacun d'eux suit:

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

Datalist-Option

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
  • Parce que le HTML5 spécifiquement dit que non cotées attributs sont valides: w3.org/TR/html-markup/syntax.html#syntax-attr-unquoted
  • Quelqu'un sait pourquoi on ne ferme pas la option balise dans le datalist-option? Sublime semble vouloir
  • johnny Metz, Vous pouvez fermer la balise, mais il peut être à fermeture automatique vous pouvez aussi faire quelque chose comme ceci: code <input list="navigateurs" name="navigation"> <datalist id="navigateurs"> <option value="firefox">Firefox</option> <option value="ie">IE</option> <option value="chrome">Chrome</option> <option value="opéra">Opéra</option> <option value="safari">Safari</option> </datalist> code Le résultat est étrange. Datalists imprimer la valeur dans la liste. Cette valeur devient alors la valeur du champ de saisie.
  • HTML 5 a été, en partie, une réaction contre le XHTML. Pour certains éléments, comme option, il n'est pas nécessaire d'avoir une balise de fermeture ou à fermeture automatique. HTML 5 != XHTML.
  • La spécification dit, "le début et La fin de certaines balises dans des normal éléments peuvent être omis." Il dit aussi, "Un élément de la balise de fin peut être omis si l'élément est immédiatement suivi par un autre élément, ou si elle est immédiatement suivie par un "optgroup" élément, ou si il n'y a plus de contenu dans l'élément parent." w3.org/TR/html/syntax.html#optional-tags
InformationsquelleAutor user928984 | 2011-07-28
  1. 159

    Pense que la différence entre une exigence et une suggestion. Pour le select élément, l'utilisateur doit sélectionner l'une des options que vous avez donné. Pour le datalist élément, il est suggéré à l'utilisateur de sélectionner l'une des options que vous avez donné, mais il peut réellement entrer dans tout ce qu'il veut dans l'entrée.

    Edit 1: Alors, qui que vous utilisez dépend de vos exigences. Si l'utilisateur doit entrer un de votre choix, utilisez le select élément. Si l'utilisation peut entrer que ce soit, utiliser le datalist élément.

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

    • Aussi, il a la plupart du temps (prise en charge partielle]((caniuse.com/#feat=datalist) dans les autres navigateurs, avec des bugs, tels que de longues datalists devenir unscrollable, etc.
    InformationsquelleAutor james.garriss
  2. 57

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

    Si de l'utiliser avec la saisie de texte, comme un type de saisie semi-automatique, alors la véritable question est: Est-il préférable d'utiliser une forme libre de la saisie de texte ou d'une liste prédéterminée d'options? Dans ce cas, je pense que la réponse est un peu plus évident.

    Si nous nous concentrons sur l'utilisation de <datalist> comme une liste d'options pour un champ de texte, puis ici sont quelques-uns des différences spécifiques entre ça et une boîte de sélection:

    • Un <datalist> fed zone de texte a une seule chaîne de caractères pour l'affichage de l'étiquette et de la soumettre. Une boîte de sélection peut avoir une valeur d'envoi contre l'affichage de l'étiquette <option value='ie'>Internet Explorer</option>.
    • Un <datalist> fed zone de texte ne prend pas en charge la <optgroup> balise pour organiser l'affichage.
    • Vous ne pouvez pas restreindre un utilisateur à la liste d'options dans un <datalist> comme vous le pouvez avec un <select>.
    • La onchange événement fonctionne différemment. Sur un <select> élément, l'événement onchange est déclenché immédiatement lors d'un changement, alors qu'avec <input type="text" l'événement est déclenché après l'élément perd le focus ou l'utilisateur appuie sur entrée.
    • <datalist> a vraiment l'irrégularité de support dans les navigateurs. La façon de montrer toutes les options disponibles sont incompatibles, et les choses ne font que s'aggraver à partir de là.

    Le dernier point est vraiment le grand à mon avis. Depuis, vous devrez avoir un caractère plus universel de saisie semi-automatique de secours, alors il n'y a presque pas de raison de passer par la difficulté de la configuration d'un <datalist>. Plus que tout bon de saisie semi-automatique pluging permettra de moyens à le style de l'affichage de vos options, qui <datalist> ne pas le faire. Si <datalist> accepté <li> éléments que vous pouvez manipuler comme vous le voulez, il aurait été vraiment génial! Mais PAS.

    Également dans la mesure où je peux dire, le <datalist> de recherche est une correspondance exacte du début de la chaîne. Donc, si vous aviez <option value="internet explorer"> et vous avez effectué une recherche pour "explorer" vous n'obtenez pas de résultats. La plupart de saisie semi-automatique des plugins de recherche de n'importe où dans le texte.

    Je ne l'ai utilisé <datalist> rapide et paresseux commodité aide pour certaines pages internes où je sais avec une certitude à 100% que les utilisateurs ont le dernier Chrome ou Firefox, et ne pas essayer de présenter de fausses valeurs. Pour tout autre cas, il est difficile de recommander l'utilisation de <datalist> due à la mauvaise prise en charge du navigateur.

    • Excellente réponse!! Pourriez-vous expliquer votre deuxième balle? Qu'entendez-vous par "option des groupes pour organiser l'affichage"? Merci.
    • autant que je sache (en 2019, sur Chrome et Firefox), <datalist> correspond à infixe (et pas seulement les préfixes). afin de "taper "re", suggère à la fois "Firefox" et "Internet Explorer".
    • Je fouille superficielle de ""optgroup " élément" renvoie à cette page depuis la toujours utiles à la MDN avec plus d'informations (et des exemples): developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
    • J'ai testé sous Firefox 66 et Chrome 73 - en fait, datalist étiquettes match de n'importe où, si par exemple votre datalist contient les noms de pays, "ted" correspond à "États-unis" et "royaume-Uni".
    InformationsquelleAutor mastaBlasta
  3. 4

    Datalist comprend la saisie semi-automatique et suggestions en natif, il peut également permettre à un utilisateur d'entrer une valeur qui n'est pas défini dans les suggestions.

    Sélectionnez ne vous donne qu'une pré-options définies par l'utilisateur, sélectionnez à partir de

    InformationsquelleAutor user3167654
  4. 2

    De la Liste de données est une nouvelle balise HTML HTML5 navigateurs pris en charge.
    Il rend comme une zone de texte avec une certaine liste d'options.
    Par Exemple, pour ce Genre de zone de Texte, il vous donnera des options comme Masculin Féminin lorsque vous tapez " M " ou " F " dans la Zone de Texte.

    <input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>
    • Cela ne répond pas à la question..
    • Vrai, mais il donne une belle, nouvelle pièce de l'information, à savoir que de taper la première lettre de sélectionner les éléments correspondants dans la liste.
    InformationsquelleAutor Deepak
  5. 0

    J'ai remarqué qu'il n'y a pas de fonction sélectionnée dans datalist. Il ne vous donne le choix, mais ne peut pas avoir une option par défaut. Vous ne pouvez pas afficher l'option sélectionnée sur la prochaine page.

    • L'équivalent pour une entrée plus datalist serait la définition de la valeur="(option par défaut)" sur l'entrée elle-même. Pour une entrée avec type="text", ce texte s'affiche par défaut, mais être modifiable.
    InformationsquelleAutor Weihui Guo
  6. 0

    Pour répondre spécifiquement à une partie de votre question "Est-il de la situation dans laquelle il serait préférable d'utiliser l'un ou l'autre?", envisager une forme de répéter des sections. Si la répétition de l'article contient de nombreux select balises, puis le options doit être rendu pour chaque sélectionnez, pour chaque ligne.

    Dans ce cas, je voudrais envisager d'utiliser datalist avec input, parce que le même datalist peut être utilisé pour n'importe quel nombre de inputs. Cela pourrait potentiellement sauver une grande quantité de temps de rendu sur le serveur, et serait échelle beaucoup mieux pour un nombre quelconque de lignes.

    • Si vous n'allez pas la peine de donner à l'utilisateur les options à choisir, pourquoi s'embêter à l'aide d'un datalist? Il suffit d'utiliser un champ de texte à la place.
    InformationsquelleAutor Bruce Pierson
  7. 0

    Il y a une autre différence importante entre select et datalist.
    Voici la prise en charge du navigateur facteur.

    select est largement pris en charge par les navigateurs, par rapport à datalist. Veuillez jeter un oeil à cette page pour compléter la prise en charge du navigateur de datalist--

    Datalist prise en charge du navigateur

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

    InformationsquelleAutor neophyte
  8. -1

    Qui est similaire à choisir, Mais datalist a des fonctionnalités supplémentaires comme suggestion automatique. Vous pouvez même type et de voir des suggestions comme et quand vous le tapez.

    Utilisateur sera également en mesure d'écrire des articles qui n'y est pas dans la liste.

    InformationsquelleAutor Viyaan Jhiingade