Etiqueta HTML `<datalist>`

La etiqueta <datalist> es uno de los elementos HTML5. Se utiliza para crear una lista de opciones de entrada, definidas dentro del elemento <datalist> y vinculadas a un campo <input> mediante el atributo list. Inicialmente, las opciones están ocultas y la lista se vuelve disponible cuando el usuario comienza a escribir. El atributo list de la etiqueta <input> debe coincidir con el id del elemento <datalist>.

Las opciones predefinidas para la entrada están encerradas en elementos <option> anidados.

Sintaxis

La etiqueta <datalist> se usa en pares. El contenido se escribe entre las etiquetas de apertura (<datalist>) y cierre (</datalist>).

Ejemplo de la etiqueta HTML `<datalist>`:

Etiqueta HTML <datalist>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>Choose browser</div>
    <input list="browsers" />
    <!-- The list attribute value matches the datalist id -->
    <datalist id="browsers">
      <option value="Opera">
      <option value="Safari">
      <option value="Firefox">
      <option value="Google Chrome">
      <option value="Maxthon">
    </datalist>
  </body>
</html>

Try it Yourself »

Resultado

Elegir navegador

Atributos

La etiqueta <datalist> admite Atributos globales y Atributos de eventos.

Práctica

¿Cuál es el uso de la etiqueta HTML <datalist>?

Especifica una lista de opciones predefinidas para un elemento <input>.Se utiliza para insertar imágenes en una página web.Define un pie de foto para un elemento <figure>.Proporciona la función de autocompletado en los campos de formulario.Se utiliza para crear gráficos animados.

Etiqueta HTML <datalist> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <datalist>: ​

Resultado ​