HTML: <datalist> tag
This HTML tutorial explains how to use the HTML element called the <datalist> tag with syntax and examples.
Description
The HTML <datalist> tag is an HTML5 element that defines a list of suggested values for an <input> tag. These suggested values will appear in the input control as a dropdown list and the available options will be filtered as the user enters data into the input control. This tag is also commonly referred to as the <datalist> element.
Syntax
In HTML, the syntax for the <datalist> tag is:
<body>
<label for="tutorial_choice">Tutorials: </label>
<input list="tutorial_types" name="tutorial_choice" id="tutorial_choice">
<datalist id="tutorial_types">
<option value="HTML">
<option value="CSS">
<option value="SQL">
</datalist>
</body>
To associate a <datalist> with an <input> control, you must specify an id
value for the <datalist> that matches the list
attribute on the <input>: (in this example, the value "tutorial_types")
Sample Output
Attributes
Only the Global Attributes apply to the <datalist> tag. There are no attributes that are specific to the <datalist> tag.
Note
- The HTML <datalist> element is found within the <body> tag. The <datalist> tag is usually found within the <form> tag.
- The <datalist> tag contains a set of <option> tags that provide the possible values for the associated <input> tag.
Browser Compatibility
The <datalist> tag has basic support with the following browsers:
- Chrome 20+
- Firefox 4+ (Gecko)
- Firefox Mobile 4+ (Gecko)
- Internet Explorer 10+ (IE)
- Edge
- Edge Mobile
- Opera 9.5+
Example
We will discuss the <datalist> tag below, exploring examples of how to use the <datalist> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
Advertisements