HTML - datalist

About

datalist is a html element that creates a set of value permitted (a domain) that may be used in a input element by grouping options.

It does not force a selection as the HTML select element does

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.

Example

Text

with a input text element

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

<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.

Number

with a input number element

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

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

Documentation / Reference





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....
What is an HTML Form?

form is an 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 from the...



Share this page:
Follow us:
Task Runner