w3resource

HTML5 : Datalist Element Tutorial

Datalist Element

In this page, we have discussed Description, Usage, Attributes, Example and Result, Browser Compatibility of HTML5 datalist element.

The HTML Datalist Element (<datalist>) contains a set of <option> elements that represent the possible options for the value of other controls.

Usage

<input list="Languages" /> 
<datalist id="Languages">
<option value="PHP">
<option value="ASP">
<option value="Python">
<option value="Ruby">
<option value="Java">
</datalist>

Whether start and end tag are required

Both the start tag and the end tag are mandatory.

What an datalist element can contain

Phrasing content or zero or more <option> elements.

Which elements can contain datalist element

Any element that accepts phrasing content.

Attributes

This element has no other attributes than the global attributes, common to all elements.

Example:

<!doctype html>
<html>
<head>
<title>HTML5 datalist example</title>
</head>
<body>
<input list="Languages" /> 
<datalist id="Languages">
<option value="PHP">
<option value="ASP">
<option value="Python">
<option value="Ruby">
<option value="Java">
</datalist>
</body>
</html>

Result

datalist output

Browser Compatibility

We have successfully tested the above example with following browser versions.

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported 5.0 Not supported 11.50 Not supported

Previous: HTML5 command Element Tutorial
Next: HTML5 Details tag and Element Tutorial

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/html5/datalist-tutorial.php