HTML <datalist> Tag

The datalist tag defines a set of predefined choices for an input element.

The <datalist> tag is used to offer "autocomplete" functionality to <input> components. As they enter data, users will see a drop-down list of pre-defined alternatives.

The id attribute of the <datalist> element must be the same as the list attribute of the input element (this binds them together).

Syntax

<datalist> Option here... </datalist>

Example

<!DOCTYPE html>
<html>
<body>

<form action="/action.php" method="get">
    <label for="langu_age">Choose your language from the list:</label>
    <input list="language" name="language" id="langu_age">

    <datalist id="language">
        <option value="HTML">
        <option value="CSS">
        <option value="Java Script">
        <option value="jQuery">
    </datalist>

    <input type="submit">
</form>
<p><strong>Safari 12.0</strong> does not support the datalist tag.<p>

</body>
</html>

Preview

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
<datalist>	20.0	4.0	12.1	10.0	9.5

<data>

HTML <datalist> Tag

Syntax

Example

Supported Browsers

Links

Tutorials

Connect with us