Datalist in HTML-HTML Tutorial-php.cn

Table of Contents

Examples of Datalist Tag in HTML

Example #3

Conclusion

Home

Web Front-end

HTML Tutorial

Datalist in HTML

PHPz

Sep 04, 2024 pm 04:22 PM

html html5 HTML Tutorial HTML Properties HTML tags

This article provides an outline to datalist in HTML. Datalist is a tag available in HTML5, which is used to autosuggest the input values to the user. This tag is the HTML5 feature that makes the input element more interactive and the user interfaces intuitive. The tag is used along with the input element tag. It is used to display the values, which are possible while typing into the input box. The user will have the freedom to enter any value into the input box; just the datalist tag will provide the autosuggestion values. Therefore, the user will have more flexibility to enter the value and with great ease.

Syntax:

<input list = "xyz" name = "input name" >
<datalist id = "xyz" >
<option value = " . . . " >
<option value = " . . . " >
<option value = " . . . " >
<option value = " . . . " >
</datalist>

Copy after login

Here, we have two main tags; one is the tag and the second is the tag. The datalist tag starts with start tag and ends with end tag . All the options are enclosed in between datalist tag. We have assigned an id to the datalist tag (xyz here), and this same id value is passed to the list attribute in the input tag. Therefore, both the tags are linked by the same id. Now that they are linked, we want to display or auto-suggest the list of values. These values are then added by using the

The option tag is the same as which is used with the select tag. Note the difference between the select tag and the datalist tag. The select tag allows choosing a value from only available options, while the datalist tag just suggests the values from the list. The name attribute is used to only identify the input element in the example.

Attributes:

There are no as such special attributes available with the tag; by default, it supports the globally available Event and HTML attributes.

Examples of Datalist Tag in HTML

Given below are the examples:

Example #1

Let’s design a simple input field with autosuggestion options as follows:

Code:

<! DOCTYPE html>
<html>
<body>
<label> Car Brand: </label>
<input list = "car_brands" name = "car brand" >
<datalist id = "car_brands" >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Toyota " >
<option value = "Volkswagen " >
<option value = "Ford " >
<option value = "Mazda " >
<option value = "Chevrolet " >
<option value = "Kia " >
</datalist>
</body>
</html>

Copy after login

Here, we have an input element as a car brand. In the autosuggestion to be displayed, we have listed in options tag. For the datalist tag, we have assigned the id as car_brands, and the same is passed to the input element. When the user clicks in the userbox or the user start typing, the HTML will automatically popup with the auto-suggested values as above.

Output:

Datalist in HTML

In the output, upon clicking in the input box, the list of car brands will display like above.

Example #2

The datalist tag will be used mostly in the case of form submission. Let’s see an example with the form embedded in it.

Code:

<!DOCTYPE html>
<html>
<body>
<form action = "#" method = "get" >
<label> Car Brand: </label>
<input list = "car_brands" name = "car brand" >
<datalist id = "car_brands" >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Toyota " >
<option value = "Volkswagen " >
<option value = "Ford " >
<option value = "Mazda " >
<option value = "Chevrolet " >
<option value = "Kia " >
</datalist>
<input type = "submit" >
</form>
</body>
</html>

Copy after login

Output:

Datalist in HTML

Here, in the output note, we have moved the input element into the form element and added the submit button.

Example #3

The datalist autosuggestion will try to show the best match as much as possible. When the user starts typing, the suggestions will be filtered out depending upon the value entered by the user. Let’s modify the first example to display this feature along with some styling of the input element.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.cars {
height: 110px;
background-color: cadetblue;
width: 100%;
}
</style>
</head>
<body>
<div class = "cars" >
<label style = "font-size: x-large; font-weight: 500; margin-left: 20px " > Car Brand: </label >
<input list = "car_brands" name = "car brand" style = "margin-top: 40px; " >
<datalist id = "car_brands" >
<option value = "Aston Martin " >
<option value = "Audi " >
<option value = "Cadillac " >
<option value = "Chevrolet " >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Chrysler " >
<option value = "Kia " >
</datalist>
</div>
</body>
</html>

Copy after login

Output without user’s typing:

Datalist in HTML

Output when a user starts typing:

Datalist in HTML

Here as a user has entered the value ‘c’ in the input box, the HTML is showing all the auto-suggestion values starting from character ‘c’. We have also modified the option elements to display the feature, which will autosuggest depending upon the alphabets.

Note: Almost all the browsers support the data list tag except the Internet Explorer 9 and Safari 12.0 and earlier versions of both. Keep this in mind while using the datalist tag.

Conclusion

The autosuggestions while getting input from the user is the feature provided in HTML5. The datalist tag is used to achieve this feature. The datalist tag is generally used along with the input tag.

The above is the detailed content of Datalist in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn