Opciones de entrada predefinidas de HTML: Funcionalidad de autocompletado

Introducción

La etiqueta datalist de HTML se utiliza para proporcionar una lista de opciones predefinidas que aparecen cuando un usuario escribe en un campo de entrada. Esta práctica te enseñará a usar la etiqueta datalist para habilitar la funcionalidad de autocompletado en un formulario.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70732{{"Opciones de entrada predefinidas de HTML"}} html/forms -.-> lab-70732{{"Opciones de entrada predefinidas de HTML"}} html/form_access -.-> lab-70732{{"Opciones de entrada predefinidas de HTML"}} html/inter_elems -.-> lab-70732{{"Opciones de entrada predefinidas de HTML"}} html/custom_attr -.-> lab-70732{{"Opciones de entrada predefinidas de HTML"}} end

Agregando el Campo de Entrada

Crea un archivo HTML llamado "index.html".

Agrega un campo de entrada a tu archivo HTML utilizando la etiqueta <input>.

<input type="text" id="car-brand" />

Creando un Datalist

Crea un datalist utilizando la etiqueta <datalist> y el atributo id.

<datalist id="car-brands"> </datalist>

Agregando Opciones al Datalist

Agrega algunas opciones al datalist utilizando la etiqueta <option>.

<datalist id="car-brands">
  <option value="Toyota"></option>
  <option value="Honda"></option>
  <option value="BMW"></option>
  <option value="Ford"></option>
  <option value="Tesla"></option>
</datalist>

Vinculando el Campo de Entrada al Datalist

Vincula el campo de entrada al datalist utilizando el atributo list y estableciendo su valor como el ID del datalist.

<input type="text" id="car-brand" list="car-brands" />

Guarda los cambios y prueba la funcionalidad de autocompletado en el formulario con múltiples marcas de automóvil.

Resumen

Siguiendo estos pasos sencillos, puedes implementar la etiqueta datalist en tu código HTML para proporcionar la funcionalidad de autocompletado en un formulario. La etiqueta datalist permite a los usuarios seleccionar de una lista de opciones predefinidas, mientras que también ofrece la capacidad de ingresar valores fuera de las opciones predefinidas si es necesario.