html5 - type - Formulario HTML: Seleccionar-Opción vs Datalista-Opción
select html php (8)
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>
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>
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 da opciones predefinidas que el usuario tiene que seleccionar de
Desde un punto de vista técnico, son completamente diferentes. <datalist> es un contenedor abstracto de opciones para otros elementos. En tu caso lo has usado con <input type="text" pero también puedes usarlo con rangos, colores, fechas, etc. http://demo.agektmr.com/datalist/
Si lo usa con el ingreso de texto, como un tipo de autocompletar, entonces la pregunta realmente es: ¿es mejor utilizar 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> como una lista de opciones para un campo de texto, aquí hay algunas diferencias específicas entre eso y un cuadro de selección:
- Un cuadro de texto alimentado por
<datalist>tiene una sola cadena para mostrar y 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 cuadro de texto alimentado por
<datalist>no admite grupos de opciones para organizar la visualización. - No puede restringir a un usuario a la lista de opciones en un
<datalist>como puede hacerlo con un<select>. - El evento onchange funciona de manera diferente. En un elemento
<select>, el evento onchange se dispara inmediatamente después del cambio, 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 soporte bastante irregular en los navegadores. La forma de mostrar todas las opciones disponibles es inconsistente, y las cosas solo empeoran desde allí.
El último punto es realmente el más grande en mi opinión. Como tendrá que tener una alternativa de autocompletar más universal, entonces no hay casi ninguna razón para tomarse la molestia de configurar un <datalist> . Además, cualquier plugin de autocompletar decente permitirá formas de personalizar la visualización de sus opciones, lo que no ocurre con <datalist> . Si <datalist> aceptara <li> elementos que pudieras manipular como quieras, ¡habría sido realmente genial! Pero no.
También en lo que puedo decir, la búsqueda <datalist> es una coincidencia exacta desde el comienzo de la cadena. Entonces, si tuviera <option value="internet explorer"> y buscó "explorador", no obtendrá ningún resultado. La mayoría de los complementos de autocompletar buscarán en cualquier parte del texto.
Solo he usado <datalist> como ayudante práctico rápido y perezoso para algunas páginas internas, donde sé con certeza al 100% que los usuarios tienen lo último en Chrome o Firefox, y no intentaré enviar valores falsos. Para cualquier otro caso, es difícil recomendar el uso de <datalist> debido al soporte de navegador muy pobre.
Es similar a select, pero datalist tiene funcionalidades adicionales como auto sugieren. Incluso puede escribir y ver sugerencias a medida que escribe.
El usuario también podrá escribir elementos que no estén en la lista.
Hay otra diferencia importante entre select y 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 el soporte completo del navegador de datalist--
Donde select es compatible efectivamente en todos los navegadores (desde IE6 +, Firefox 2+, Chrome 1+, etc.)
La Lista de datos es una nueva etiqueta HTML en navegadores compatibles con HTML5. Se representa como un cuadro de texto con una lista de opciones. Por ejemplo, en el cuadro Texto de género, le dará opciones como Hombre Mujer cuando escribe ''M'' o ''F'' en el Cuadro de texto.
<input list="Gender">
<datalist id="Gender">
<option value="Male">
<option value="Female>
</datalist>
Noté que no hay una característica seleccionada en datalist. Solo le permite elegir, pero no puede tener una opción predeterminada. Tampoco puede mostrar la opción seleccionada en la página siguiente.
Para responder específicamente a 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 etiquetas de select , entonces la option s se debe representar para cada selección, para cada fila.
En tal caso, consideraría usar datalist con input , porque el mismo datalist se puede usar para cualquier cantidad de input s. Esto podría ahorrar una gran cantidad de tiempo de renderización en el servidor y escalaría mucho mejor en cualquier cantidad de filas.
Piense en ello como la diferencia entre un requisito y una sugerencia. Para el elemento de select , se requiere que el usuario seleccione una de las opciones que ha otorgado. Para el elemento datalist , se sugiere que el usuario seleccione una de las opciones que ha dado, pero que realmente puede ingresar cualquier cosa que quiera en la entrada.
Edición 1: Entonces, cuál usarás depende de tus requisitos. Si el usuario debe ingresar una de sus elecciones, use el elemento de select . Si el uso puede ingresar lo que sea, use el elemento datalist .
Editar 2: Encontré este tidbit en el HTML Living Standard : "Cada elemento de opción que es un descendiente del elemento datalist ... representa una sugerencia".