8

Buenas, ¿cual es la diferencia entre emplear un input list o select?

A continuación dejo un ejemplo.

<input list="browsers">
   <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Google Chrome">
      <option value="Opera">
      <option value="Safari">
   </datalist>

<select name="Seleccion">
   <option value="Rojo">rojo</option>
   <option value="Verde">verde</option>
</select>

2 respuestas 2

7

Algunas diferencias:

  • Con un list/datalist puedes introducir valores manualmente que no se ajusten exactamente a los valores sugeridos en el datalist, mientras que con un select tienes que elegir de los valores de los option obligatoriamente.
  • select es soportado por todos los navegadores, mientras que el soporte para list/datalist aunque extendido, aún no está ahí del todo y puede dar problemas (especialmente en dispositivos móviles)... Y curiosamente la manera de solucionarlo es tener un select dentro del datalist.
  • Puedes tener múltiples input list apuntando al mismo datalist sin afectar a la página (crear uno es básicamente automático), mientras que a un select debes insertarle todos los option para que tenga valores, lo cual puede afectar negativamente al rendimiento.

Y aquí algunas diferencias que van a depender del navegador que uses:

  • En Chrome/Firefox, con un list/datalist puedes buscar los elementos por cualquier parte de la cadena, mientras que con select tienes que buscar empezando por el primer carácter de la cadena (por ejemplo, en el list puedes escribir una "c" y automáticamente sugerirá "Google Chrome", mientras que en el select para seleccionar Chrome habría que empezar con una "g" porque es "Google Chrome"). En IE el comportamiento es el mismo entre input/datalist y select.
  • Si hay muchos valores, al desplegar un select se mostrarán todos los valores (puede que con un scroll), mientras que con un list/datalist sólo se mostrarán algunos o ninguno (p.e. Chrome mostrará una lista selecta mientras que Firefox no mostrará nada hasta que no se empiece a escribir).

——-

La principal diferencia es que no son lo mismo: uno es un campo de texto con autocompletado/sugerencias y el otro es una lista de valores fijos. Algunos navegadores los representarán de manera muy similar, pero esa similitud va a depender del navegador que se use (p.e. IE y Chrome muestran los input list parecidos a un select pero Firefox lo representa como un campo de texto normal hasta que se empieza a escribir).

7

Según leí (hoy mismo), el select te obliga a elegir un valor de la lista, en tanto el datalist te permite ingresar un valor que no se halle en la lista (eso a veces conlleva a errores de parte del usuario), ademas el elemento datalist, puede ser utilizado con otros tipos de input, no solo texto.

En base a lo que nos dice la W3C, esta clase de listas se puede utilizar con tipo url, teléfono, color y fecha. (https://www.lawebera.es/diseno-web-html-5/uso-elemento-datalist.php)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.