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