Datalist Tag In Html

In this article, we will discuss Datalist Tag. Wishing that it would serve the learning requirements.

The datalist tag in HTML is used to provide a pre-defined list of options to the user when they are filling out a form. When a user types into an input field that has a list attribute pointing to a datalist element, a dropdown list of options will appear, based on the values in the datalist element.

A datalist consisting of predefined values (attached to an <input> element):

Example

<!DOCTYPE html> <html> <body> <label for="dishes">Choose your favorite dish from the list:</label> <input type="text" list="dish" name="dishes" id="dishes"> <datalist id="dish"> <option value="Pernil"></option> <option value="Beef patty"></option> <option value="Soup dumplings"></option> <option value="Mutton chop"></option> <option value="Beef Steak"></option> </datalist> </body> </html>

Here is another example that shows the working of <datalist> tag in HTML:

Example:

<!DOCTYPE html> <html><body><br><br><br><label for="country">Choose a country:</label><br><input type="text" id="country" name="country" list="countries"><br><datalist id="countries"><br> <option value="Canada"><br> </option><option value="United States"><br> </option><option value="Mexico"><br> </option><option value="Brazil"><br> </option><option value="Argentina"><br> </option><option value="Chile"><br> </option><option value="Australia"><br> </option><option value="New Zealand"><br> </option><option value="Japan"><br> </option><option value="South Korea"><br> </option><option value="China"><br> </option><option value="India"><br></option></datalist><br><br> </body></html>

Table Of Content-

Datalist Tag In Html:

Datalist Tag – Uses and Definition

A Datalist tag <datalist> indicates a list of default values for an input element.

The <datalist> tag allows you to provide an “autocomplete” feature to <input> elements. A drop-down list of predefined options will accompany data input.

It is necessary for the <datalist> element’s id attribute to match the <input> element’s list attribute (by doing so, they are bound together).

Browser Compatibility

In the table, numbers indicate which browser version supported the element for the first time.

Element
<datalist>	20.0	10.0	4.0	12.1	9.5

Global Attributes

<datalist> Tags in HTML are compatible with Global Attributes too.

Event Attributes

In HTML, the <datalist> tag accepts Event Attributes as well.

CSS Default Settings

The majority of browsers will show the <datalist> element with the following values by default in

datalist {
display: none;
}

Tip: A complete guide to HTML styles can be found in our HTML Styles chapter.

HTML Datalist Tag Benefits

The <datalist> tag in HTML offers several benefits, including:

The <datalist> tag can improve the user experience by providing users with a list of pre-defined options to choose from as they type in a form field. This saves time and effort for the user, making the form more user-friendly and efficient.
The <datalist> tag can be used in a variety of ways to enhance different types of forms. For example, it can be used for date selection, product selection, location selection, and more.
The <datalist> tag can also improve the accessibility of a form. Screen readers can read out the options in the datalist element, making it easier for users with disabilities to navigate and fill out the form.
The <datalist> tag can be customized to fit the design and style of a website. Developers can use CSS to change the appearance of the dropdown list or add custom functionality using JavaScript.
The <datalist> tag is supported by all modern web browsers, making it a reliable and widely-used tool for enhancing forms.

Do leave your reaction below as a source of appreciation or a feedback to bring improvements on this site.

We value your feedback.