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!

Answer