Home > DeveloperSection > Forums > Data List tag in HTML
 Ask Question

Data List tag in HTML

What is Datalist tag in HTML? And why is it used?

Last updated:7/20/2021 12:42:43 AM

1 Answers

Ethan Karla
Ethan Karla

The HTML <datalist> tag is is used to provide an auto complete feature on form element. It provides a list of predefined options to the users to select data.

The datalist tag is introduced in HTML5.

The <datalist> tag should be used with an <input< element that contains a 'list' attribute. The value of 'list' attribute is linked with the datalist id.

Let's discuss it with an example : 

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <title>DataList</title>

</head>

<body>

    <label>

        Enter your favorite cricket player: Press any character<br />

        <input type='text' id='favCktPlayer' list='CktPlayers'>

        <datalist id='CktPlayers'>

            <option value='Sachin Tendulkar'>

            <option value='Brian Lara'>

            <option value='Jacques Kallis'>

            <option value='Ricky Ponting'>

            <option value='Rahul Dravid'>

            <option value='Shane Warne'>

            <option value='Rohit Sharma'>

            <option value='Donald Bradman'>

            <option value='Saurav Ganguly '>

            <option value='AB diVilliers'>

            <option value='Mahendra Singh Dhoni'>

            <option value='Adam Gilchrist'>

        </datalist>

    </label>

</body>

</html>

Hope this information will be helpful for you.

Happy Coding!

report abuse

Answer

© Copyright © 2010 - 2021 MindStick Software Pvt. Ltd. All Rights Reserved