Formulario HTML: Seleccionar-Opción vs Datalista-Opción


136

Me preguntaba cuáles son las diferencias entre Select-Option y Datalist-Option. ¿Hay alguna situación en la que sería mejor usar uno u otro? Un ejemplo de cada uno sigue:

Seleccionar opción

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

Opción datalista

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

11
Porque el HTML5 específicamente dice que los atributos sin comillas son válidos: w3.org/TR/html-markup/syntax.html#syntax-attr-unquoted
james.garriss

1
¿Alguien sabe por qué no cerramos la optionetiqueta en la opción datalist? Sublime parece querer
Johnny Metz

1
@ johnny Metz Puede cerrar la etiqueta pero puede cerrarse automáticamente también puede hacer algo como esto: code <input list = "browsers" name = "browser"> <datalist id = "browsers"> <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> codeEl resultado es extraño. Los datalistas imprimen el valor en la lista. Ese valor se convierte en el valor del campo de entrada.
Sarah M Giles

3
@JohnnyMetz, HTML 5 fue, en parte, una reacción contra XHTML. Para ciertos elementos, como option, no es necesario tener una etiqueta de cierre o ser de cierre automático. HTML 5! = XHTML.
james.garriss

2
La especificación dice: "Se pueden omitir las etiquetas de inicio y fin de ciertos elementos normales". También dice: "La etiqueta final de un elemento de opción puede omitirse si el elemento de opción es seguido inmediatamente por otro elemento de opción, o si es seguido inmediatamente por un elemento de optgroup, o si no hay más contenido en el elemento primario". w3.org/TR/html/syntax.html#optional-tags
james.garriss

Respuestas:


180

Piense en ello como la diferencia entre un requisito y una sugerencia. Para elselect elemento, el usuario debe seleccionar una de las opciones que ha dado. Para el datalistelemento, se sugiere que el usuario seleccione una de las opciones que ha dado, pero en realidad puede ingresar lo que quiera en la entrada.

Edición 1: Entonces, cuál usa depende de sus requisitos. Si el usuario debe ingresar una de sus opciones, use elselect elemento Si el uso puede ingresar lo que sea, use el datalistelemento.

Edición 2: Encontré este dato en el Estándar de Vida HTML : "Cada elemento de opción que es un descendiente del elemento datalista ... representa una sugerencia".


Además, tiene la mayoría de [apoyo parcial] (( caniuse.com/#feat=datalist ) en los otros navegadores, con los insectos, tales como listas de datos largos convertirse unscrollable, etc.
Govind Rai

En Chrome en este momento, si se ingresan datos (mecanografiados), se prohíbe hacer clic en la flecha. Esto probablemente no sea ideal en la mayoría de los casos.
David

66

Desde un punto de vista técnico, son completamente diferentes. <datalist>es un contenedor abstracto de opciones para otros elementos. En su caso, lo ha usado, <input type="text"pero también puede usarlo con rangos, colores, fechas, etc. http://demo.agektmr.com/datalist/

Si lo usa con entrada de texto, como un tipo de autocompletado, entonces la pregunta realmente es: ¿Es mejor usar una entrada de texto de forma libre o una lista predeterminada de opciones? En ese caso, creo que la respuesta es un poco más obvia.

Si nos centramos en el uso de <datalist> una lista de opciones para un campo de texto, aquí hay algunas diferencias específicas entre eso y un cuadro de selección:

  • Un <datalist>cuadro de texto alimentado tiene una sola cadena tanto para mostrar la etiqueta como para enviar. Un cuadro de selección puede tener un valor de envío diferente frente a la etiqueta de visualización<option value='ie'>Internet Explorer</option> .
  • Un <datalist>cuadro de texto alimentado no es compatible con<optgroup> etiqueta para organizar la visualización.
  • No puede restringir a un usuario a la lista de opciones <datalist>como puede hacerlo con un<select> .
  • El evento onchange funciona de manera diferente. En un <select>elemento, el evento onchange se activa inmediatamente al cambiar, mientras que con<input type="text" el evento se dispara después de que el elemento pierde el foco o el usuario presiona enter.
  • <datalist>tiene un soporte realmente irregular en todos los navegadores. La forma de mostrar todas las opciones disponibles es inconsistente, y las cosas solo empeoran a partir de ahí.

El último punto es realmente el más grande en mi opinión. Dado que tendrá que tener un respaldo de autocompletado más universal, entonces casi no hay razón para pasar por el problema de configurar a <datalist>. Además, cualquier complemento decente de autocompletar permitirá formas de diseñar la visualización de sus opciones, lo <datalist>que no funciona. Si hubiera <datalist>aceptado <li>elementos que pudieras manipular como quieras, ¡habría sido realmente genial! Pero no.

También en lo que puedo decir, la <datalist>búsqueda es una coincidencia exacta desde el comienzo de la cadena. Entonces si tuvieras<option value="internet explorer"> y buscado 'explorador', no obtendría resultados. La mayoría de los complementos de autocompletar buscarán en cualquier parte del texto.

Solo lo he usado <datalist>como un auxiliar de conveniencia rápido y perezoso para algunas páginas internas donde sé con 100% de certeza que los usuarios tienen la última versión de Chrome o Firefox, y no intentaré enviar valores falsos. Para cualquier otro caso, es difícil recomendar el uso <datalist>debido a la poca compatibilidad del navegador.


3
Excelente respuesta !! ¿Podrías explicar tu segunda bala? ¿Qué quiere decir con "grupos de opciones para organizar la visualización"? Gracias.
Govind Rai

afaik (en 2019, en Chrome y Firefox), <datalist> coincide con infijos (no solo prefijos). así que "escribir" re "sugiere" Firefox "e" Internet Explorer ".
sam boosalis

@GovindRai I búsqueda rápida de "elemento optgroup" devuelve esta página del MDN siempre útil con más información (y ejemplos): developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
TylerH

He realizado pruebas con Firefox 66 y Chrome 73; en realidad, las etiquetas de la lista de datos coinciden en cualquier lugar, por ejemplo, si su lista de datos contiene nombres de países, "ted" coincidirá con "Estados Unidos" y "Reino Unido".
Błotosmętek

5

Datalist incluye autocompletar y sugerencias de forma nativa, también puede permitir que un usuario ingrese un valor que no está definido en las sugerencias.

Seleccionar solo le brinda opciones predefinidas que el usuario debe seleccionar


2

La Lista de datos es una nueva etiqueta HTML en navegadores compatibles con HTML5. Se presenta como un cuadro de texto con alguna lista de opciones. Por ejemplo, para el cuadro de texto Género, le dará opciones como Hombre Mujer cuando escriba 'M' o 'F' en el Cuadro de texto.

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

55
Es cierto, pero proporciona una nueva y agradable información, a saber, que al escribir la primera letra se seleccionarán los elementos correspondientes en la lista.
james.garriss

1

Para responder específicamente una parte de su pregunta "¿Hay alguna situación en la que sería mejor usar una u otra?", Considere un formulario con secciones repetidas. Si la sección de repetición contiene muchas selectetiquetas, entonces eloption deben representar s para cada selección, para cada fila.

En tal caso, consideraría usar datalistcon input, porque lo mismo datalistse puede usar para cualquier número de inputs. Potencialmente, esto podría ahorrar una gran cantidad de tiempo de representación en el servidor y se escalaría mucho mejor a cualquier número de filas.


Si no se va a molestar en dar al usuario opciones para elegir, ¿por qué molestarse en usar una lista de datos? Simplemente use un campo de texto en su lugar.
james.garriss

0

Noté que no hay una función seleccionada en datalist. Solo le da opciones, pero no puede tener una opción predeterminada. Tampoco puede mostrar la opción seleccionada en la página siguiente.


El equivalente para una entrada más datalista sería establecer el valor = "(opción predeterminada)" en la entrada en sí. Para una entrada con type = "text", este texto aparecerá de manera predeterminada pero será editable.
Bemisawa

0

Hay otra diferencia importante entre selecty datalist. Aquí viene el factor de soporte del navegador.

select es ampliamente compatible con navegadores en comparación con datalist. Por favor, eche un vistazo a esta página para obtener soporte completo del navegador de datalist--

Soporte de navegador datalista

Donde as select es compatible con todos los navegadores (desde IE6 +, Firefox 2+, Chrome 1+, etc.)


0

Es similar a select, pero datalist tiene funcionalidades adicionales como la sugerencia automática. Incluso puede escribir y ver sugerencias a medida que escribe.

El usuario también podrá escribir elementos que no están en la lista.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.