datalist element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The datalist element represents a list of predefined options that can be used to supply suggestions in many form controls. These options can be provided by the browser in a list or as an autocompletion referece, depending on the browser and the control this element is attached to. A datalist is never rendered on its own.

While the datalist element acts as a container, the suggestions are defined with the option element. The content of this element will be shown as a suggestion when the browser considers it properly (like for example, when the user starts writing in a text box).

To improve compatibility, a datalist can contain the options inside a select control, to provide better user experience in non-supporting browsers.

To link a datalist to a control, the value of the id attribute in the datalist should match the value of the list attribute in the control.

If a value in the datalist is invalid for the linked control, the browser will simply ignore it. Authors should check the values provided, specially in relation with attributes like pattern, min, max, step, etc.

Browser support for the datalist element is incomplete. Authors shouldn't rely on its functionality for important features, until support grows.

Ejemplos

This first example shows a basic usage of the datalist element. Here, a text control is linked to the datalist to provide a set of suggestions for the control. This linking is achieved by matching the attribute id in the datalist with the attribute list in the control. Options are provided with the option element.

<p>Image format: <input type="text" name="imageformat" list="imageformatslist"></p>
<datalist id="imageformatslist">
  <option>PNG</option>
  <option>JPEG</option>
  <option>GIF</option>
  <option>TGA</option>
</datalist>

Image format:

Authors must be aware that the values supplied by the items in a datalist may not comply with the requirements of the associated control. In such cases, browsers will simply ingore all non-compliant elements in the list. To prevent a situation like this from happening, authors should check carefully the values provided in the datalist element in relation with the associated control and the attributes of it that narrow the range of accepted values, like pattern, min, max, step, etc.

In the following example, we'll provide a set of non-conforming suggestions to a number field that will be excluded for not being compliant with: the element itself (the value isn't a number), the min attribute (the value is lower than the limit) and the step attribute (the value has more decimals than the allowed).

<p>Compund weight: <input type="number" name="compoundweight" min="2" step="0.01" list="weightslist"></p>
<datalist id="weightslist">
  <option>Very heavy</option>
  <option>0.57</option>
  <option>0.0215</option>
  <option>4.62</option>
</datalist>

Compund weight:

Lastly, we'll provide datalist options inside a select control, as a way to improve user experience in non-suporting browsers. Note that supporting browsers, in contrast to non-supporting ones, won't display the contents of the datalist element.

<p><label>Enter a name for your pet: <input type="text" name="petname" list="petnames"></label></p>
<datalist id="petnames">
  <label>Or select one from the following list</label>
    <select name="petname">
      <option>Rocky</option>
      <option>Stripes</option>
      <option>Watson</option>
      <option>Lucky</option>
    </select>
  </label>
</datalist>

Attributes

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.

X

Are you looking for a place to host your next website? I can help you with that!