HTML datalist element

The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

To bind the <datalist> element to the control, we give it a unique identifier in the id attribute, and then add the list attribute to the <input> element with the same identifier as value. Only certain types of <input> support this behavior, and it can also vary from browser to browser.

Each <option> element should have a value attribute, which represents a suggestion to be entered into the input. It can also have a label attribute, or, missing that, some text content, which may be displayed by the browser instead of value (Firefox), or in addition to value (Chrome and Safari, as supplemental text). The exact content of the drop-down menu depends on the browser, but when clicked, content entered into control field will always come from the value attribute.