List Attribute

The list attribute displays a list of predefined options suggested to the user. The user can select the required option from this list.

The value of the id attribute in the datalist element must be given in the list attribute. If you don't provide the id of the datalist element to the list attribute, the suggestions list won't work.

The suggestions list has no mandatory requirements. The user can provide a different value if they wish.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <label for="flower">Search Flowers</label>
        <input type="text" id="flower" list="flower-list"> 
            <datalist id="flower-list">
                <option value="Lotus"></option>
                <option value="Sunflower"></option>
                <option value="Rose"></option>
                <option value="Jasmine"></option>
                <option value="Tulip"></option>
            </datalist>
        <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Try it Yourself