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

Question

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>

Answer 1

Il pense que 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é. Pour l' 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 vos choix, de l'utilisation de l' select élément. Si l'utilisation peut accéder, de l'utilisation de l' datalist élément.

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

Answer 2

À 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 l' <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> de la fed de 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> de la fed de zone de texte ne prend pas en charge l'option de groupes pour organiser l'affichage.
• Vous ne pouvez pas restreindre un utilisateur à la liste des options en <datalist> comme vous le pouvez avec un <select>.
• Le 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, <datalist> ne le fait pas. Si <datalist> accepté <li> éléments que vous pouvez manipuler comme vous le voulez, il aurait été vraiment génial! Mais NON.

Aussi, dans la mesure où je peux dire, l' <datalist> de la 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.

J'ai seulement 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 d' <datalist> due à la mauvaise prise en charge du navigateur.

Answer 3

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>