HTML <datalist> Tag
HTML
The <datalist> tag provides a list of predefined options to the users to select data
HTML <datalist> Tag
➔ The <datalist> element contains a set of <option> elements that represent the recommended options to choose from among the other controls.
➔ It provides an autocomplete feature on form elements.
The datalist tag syntax
<label for="fruit">Choose your fruit from the list:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Orange">
<option value="Mango">
<option value="Papaya">
<option value="Strawberry">
</datalist>
Key aspects and best practices
➔ The user is given an input field with a list of predefined options and the user can choose any one from the list.
➔ When the user types characters in the textfield, it suggests options for names that match a predefined list.
➔ Users are allowed to enter a custom value outside of the predefined names in the list. This is different from select dropdown options where a value is supposed to be selected from the list, custom value is not allowed.
➔ Users are free to type anything and are not restricted to use the suggested values.
➔ If there is a long list from which the user has to select a value, the auto-suggest feature helps the user to select the values and thereby speeds up the work.
➔ The developer needs to validate the user data entered into the datalist field using JavaScript, as users can type anything they want.
The datalist tag example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML datalist tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>HTML datalist tag example</h3>
<label for="fruit">Choose your fruit from the list:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Orange">
<option value="Mango">
<option value="Papaya">
<option value="Strawberry">
</datalist>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<p>Enter your favorite food name:</p>
<input type="text" list="food">
<datalist id="food">
<option value="Beverages">
<option value="Dairy Products">
<option value="Grains">
<option value="Meat">
<option value="Seafood">
</datalist>
Click on the "Try it Now" button to see how it works.