HTML Predefined Input Options: Autocomplete Functionality

Introduction

The HTML datalist tag is used to provide a list of predefined options that appear when a user is typing in an input field. This lab will teach you how to use the datalist tag to enable autocomplete functionality on a form.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Adding the Input Field

Create an HTML file called "index.html".

Add an input field to your HTML file using the <input> tag.

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

Creating Datalist

Create a datalist by using the <datalist> tag and the id attribute.

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

Adding Options to the Datalist

Add some options to the datalist using the <option> tag.

<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>

Linking the Input Field to the Datalist

Link the input field to the datalist by using the list attribute and setting its value to the ID of the datalist.

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

Save the changes and test the autocomplete functionality on the form with multiple car brands.

Summary

By following these simple steps, you can implement the datalist tag in your HTML code to provide autocomplete functionality on a form. The datalist tag allows users to select from a list of predefined options while also providing the ability to input values outside of the predefined options if needed.