<datalist>: The HTML Datalist Element

1 Description

The HTML <datalist> element is used in conjunction with an <input> element to allow users to input specific pre-defined values. Each value which a user may enter is pre-defined as a single <option> element, all <option> elements are children of a single <datalist> element. The <datalist> element gets linked to the <input> element by defining an 'id' attribute on the <datalist>, and defining a 'list' attribute on the input element and having the values of those two attributes match, thus telling the browser they are linked. See below for an example.

2 Examples

<!DOCTYPE html>
<html>
    <head>
        <title>Example Page</title>
    </head>
    <body>
        <h1>Dinner Order Entry Form</h1>
        <form id="user_dinner_order" action="/api/dinner/order/create" method="POST">
            <label for="dinner_order">Dinner Order</label>
            <input list="dinner_options" id="dinner_order" type="text"/>
            <datalist id="dinner_options">
                <option value="Spaghetti and Meatballs"></option>
                <option value="Pizza"></option>
                <option value="Hamburger and French Fries"></option>
                <option value="Filet Mignon Steak with A Baked Potato"></option>
            </datalist>
            <button type="submit">Submit Dinner Order</button>
        </form>
    </body>
</html>

This document was last updated: