datalist

I. 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.

II. 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>