HTML datalist

La etiqueta <datalist> es una etiqueta de HTML5 que se utiliza para crear una lista de opciones predefinidas que se pueden utilizar en un campo de entrada. La lista de opciones se muestra como un menú desplegable cuando se hace clic en el campo de entrada o se comienza a escribir en él.

La lista de opciones se asocia con un campo de entrada mediante el atributo list, que tiene como valor el ID de la lista de opciones.

La etiqueta <datalist> se compone de varias etiquetas <option>, cada una de las cuales especifica una opción disponible en la lista. El valor de cada etiqueta <option> es el valor que se mostrará en la lista de opciones, mientras que el contenido de la etiqueta es el valor que se insertará en el campo de entrada si se selecciona esa opción.

Ejemplo de uso

Un ejemplo de uso de la etiqueta <datalist> es el siguiente:

<label for="fruits">Fruits:</label>
<input type="text" id="fruits" name="fruits" list="fruits-list">
<datalist id="fruits-list">
  <option value="Apple">
  <option value="Banana">
  <option value="Mango">
  <option value="Orange">
  <option value="Pineapple">
</datalist>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se crea un campo de entrada de texto con un ID de “frutas”, y una lista de opciones asociada con un ID “frutas-lista”, la cual contiene varias opciones de frutas. El usuario podrá escribir en el campo de entrada y se le mostrará una lista desplegable con las opciones predefinidas que se ha establecido.

La etiqueta <datalist> es compatible con los navegadores modernos y es una buena manera de proporcionar opciones predefinidas para los campos de entrada, ayudando a evitar errores de escritura y aumentando la usabilidad en el formulario.

Atributos

La etiqueta <datalist> de HTML tiene los siguientes atributos:

• id: Este atributo es necesario para asociar una lista de opciones con un campo de entrada mediante el atributo list en el campo de entrada.

• accesskey: Este atributo establece una tecla de acceso para la lista de opciones, permitiendo al usuario acceder a ella mediante una combinación de teclas.

• class: Este atributo permite asociar una o varias clases CSS a la lista de opciones para aplicar estilos específicos.

• hidden: Este atributo especifica que la lista de opciones debe ser ocultada, pero sigue siendo funcional.

• tabindex: Este atributo especifica el orden en el que los elementos deben recibir el enfoque cuando el usuario presiona la tecla TAB.

• title: Este atributo especifica una descripción adicional sobre la lista de opciones que se mostrará como una herramienta de ayuda al pasar el cursor sobre ella.

Es importante mencionar que estos son solo algunos de los atributos que se pueden utilizar con la etiqueta <datalist> y que puedes utilizar cualquiera de ellos según tus necesidades y requerimientos.

Ejemplo

Un ejemplo completo de uso de la etiqueta <datalist> con algunos de sus atributos en HTML sería el siguiente:

<label for="colors">Select a color:</label>
<input type="text" id="colors" name="colors" list="colors-list" accesskey="c" tabindex="1">
<datalist id="colors-list" class="custom-colors" title="List of available colors">
  <option value="Red">
  <option value="Green">
  <option value="Blue">
  <option value="Yellow">
  <option value="Orange">
</datalist>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se crea un campo de entrada de texto con un ID de “colores”, una lista de opciones asociada con un ID “colores-lista”, la cual contiene varias opciones de colores. El usuario podrá escribir en el campo de entrada y se le mostrará una lista desplegable con las opciones predefinidas que se ha establecido.

Además, se usa el atributo “accesskey” y “tabindex” para poder acceder a la lista de opciones mediante una combinación de teclas y el orden de enfoque. También se emplea el atributo “class” para aplicar estilos específicos y el atributo “title” para mostrar una descripción adicional de la lista de opciones.

Es importante mencionar que en este ejemplo se usó el atributo for en la etiqueta <label> para vincularla con el campo de entrada mediante el atributo id, esto permite que al hacer clic en la etiqueta “Select a color”, el cursor se posicione automáticamente en el campo de entrada.

También es importante mencionar que la etiqueta <datalist> debe ser utilizada en conjunto con el atributo list en un campo de entrada para funcionar correctamente, en este ejemplo se usó el atributo list="colors-list" para vincular el campo de entrada con la lista de opciones.