Home > Abakada: Back to Basics > Language References > HTML Elements > DATALIST Element
Assigns a set of pre-defined options for an <input> element. | HTML 5 |
HTML Syntax
<datalist
class = classname
id = value
style = css_style_rules
title = text
>
NOTE: Both start and end tags are required.
The <datalist> element is used to provide a set of <option> elements that represent predefined choices for an <input> field.
In its simplest form, the <datalist> element can contain one or more <option> elements, which will be the selectable choices for the <input> control.
The <datalist> element is hooked up to an <input> element using the list attribute on the <input> element.
The <datalist> element’s id attribute must be set to the <input> element’s list attribute value, to bind the elements together.
The <datalist> element has no attribute of its own, but supports global attributes common to all HTML elements.
The datalist and <selecT> elements are both used for choosing an option from a given list.
The main difference is that in the <datalist> tag, as a user starts to type in the <input> field, the list of matching options appear. The user can then choose from the options in the list, and can even add more text after selecting an option.
The <select> tag does not provide this feature.
The <datalist> element has no attribute of its own, but supports global attributes common to all HTML elements.
The following example shows how the <datalist> element may be used.
<label>Happiness for me is:
<input name=wants list=wants>
<datalist id=wants>
<option value="a happy family">
<option value="a stable job">
<option value="a healthy mind and body">
<option value="traveling the world">
<option value="peace and prosperity">
</datalist>
</label>
<input type="submit">
which would render on a web page as follows:
OPTION SELECT