/

HTML / CSS / JavaScript Tutorial

HTML Element: <datalist>

[this page | pdf | back links]

The HTML <datalist> element identifies a list of pre-defined options for an <input> element. It is new in HTML 5. The <input> element’s list attribute should be set to the id of the <datalist> in order to bind the two together and within the <datalist> should be some <option> elements. Users will then see a dropdown list of choices (defined by the <option> elements) that they can select for the <input> element, e.g.:

 

<input list="fruit">

<datalist id="fruit">

    <option value="apple">

    <option value="banana">

    <option value="orange">   

</datalist>

 

The attributes it can take are HTML global attributes and HTML event attributes.

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods. It also supports the following additional property:

 

Property

Description

More

options

Returns a collection of all options included in datalist element

Here

 

The default style applicable to this element is shown here.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Created using HTML:<br>
<input list="fruit">
<datalist id="fruit">
    <option value="apple">
    <option value="banana">
    <option value="orange">    
</datalist>

<br><br>Created using JavaScript:<br>
<input list="fruit2">
<span id="element"></span>

<script>
var x = document.createElement("DATALIST"); x.setAttribute("id","fruit2");
var a1 = document.createElement("OPTION"); a1.setAttribute("value","apple");
var a2 = document.createElement("OPTION"); a2.setAttribute("value","banana");
var a3 = document.createElement("OPTION"); a3.setAttribute("value","orange");
x.appendChild(a1);
x.appendChild(a2);
x.appendChild(a3);
document.body.appendChild(x);
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | HTML Elements


Desktop view | Switch to Mobile