What is a HTML datalist element?


A datalist 1) is a html element that implements a combobox.



with a input text element

  • The HTML
<datalist id="theme-values">
    <option value="Orange">
    <option value="Red">
    <option value="Green">
    <option value="Yellow">

<label for="themes">Choose a theme:</label>
<input type="text" list="theme-values" id="themes" size=20 />
  • Result:

Unfortunately, once a value was selected, you need to delete it to be able to select another one. If you have few values, you may want to use select.


with a input number element

<datalist id="even-values">
    <option value="2">
    <option value="4">
    <option value="6">
    <option value="8">

<label for="numbers">Choose a value:</label>
<input type="number" list="even-values" id="numbers"  />




  • It introduces a autocomplete filtering on the value entered.


  • Unfortunately, the list behavior is not specified and it filters by default leaving out the other values once a value is selected.

Discover More
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - AutoComplete

autocompletion in HTML will be find: in the HTML autocomplete attribute implemented in the datalist element or via a implementation/library The autocomplete attribute permits to fill forms with...
HTML - Option

option is an element used to define a value. option can be contained in: a select (list) an optgroup (to group option) or a datalist element (data array) For example, this select creates a...
HTML - Phrasing Content (Text)

Phrasing content is: the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs. Most elements that are categorized...
How to use the Select HTML Element?

select is an HTML control form element used for selecting one or more value amongst a set of options. It creates a drop-down list used in a form that will set a scalar value from a list of options. ...
What are Form Control elements in HTML ?

control form elements are elements that are used specifically inside a form. They are used: to specify a key and a value. to layout the form to submit it or reset it field set [optional]...
What are HTML Input Elements?

An inputinput element of a form control that permits to define a scalar value (single value) inputFull list Ref Doc The type attribute defined: the default behavior the design of the element....
Card Puncher Data Processing
What is a combobox?

A combobox is a combo of: an input and a listbox popup. In HTML, the built-in component is known as data list
What is an HTML Form?

A form is an HTML element that represents a user-submittable form. When parsed as HTML, a form element's start tag will imply a p element's end tag just before. The pizza order form (taken...

Share this page:
Follow us:
Task Runner