Revision 322905 of <datalist>

  • Revision slug: HTML/Element/datalist
  • Revision title: datalist
  • Revision id: 322905
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

{{ HTMLVersionHeader(5) }}


The HTML Datalist Element (<datalist>) contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other controls.

Usage context

Permitted content Phrasing content or zero or more {{ HTMLElement("option") }} elements
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements Any element that accepts phrasing content
Normative document HTML5, section 4.10.10


This element has no other attributes than the global attributes, common to all elements.

DOM Interface

This element implements the HTMLDataListElement interface.


<input list="browsers" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">

{{ HTMLLiveSample("datalist.html") }}

This HTML renders thusly in Firefox 4:



{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 20 {{ CompatGeckoDesktop("2.0") }} 10 9.5 {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatNo()}} {{ CompatGeckoMobile("2.0") }} {{CompatNo()}} 10 {{CompatNo()}}

See also

  • The {{ HTMLElement("input") }} element, and more specifically its {{ htmlattrxref("list", "input") }} attribute;
  • The {{ HTMLElement("option") }} element.

Revision Source

<p>{{ HTMLVersionHeader(5) }}</p>
<h2 id="Summary">Summary</h2>
<p>The <em>HTML Datalist Element</em> (<span style="font-family: Courier New;">&lt;datalist&gt;</span>) contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other controls.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
      <td>Permitted content</td>
      <td><a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">Phrasing content</a> or zero or more {{ HTMLElement("option") }} elements</td>
      <td>Tag omission</td>
      <td>None, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td>
      <td>Permitted parent elements</td>
      <td>Any element that accepts <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a></td>
      <td>Normative document</td>
      <td><a class="external" href="" rel="external nofollow" target="_blank" title="">HTML5, section 4.10.10</a></td>
<h2 id="Attributes">Attributes</h2>
<p>This element has no other attributes than the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>, common to all elements.</p>
<h2 class="editable" id="DOM.C2.A0Interface">DOM&nbsp;Interface</h2>
<p>This element implements the <code><a href="/en/DOM/HTMLDataListElement" title="en/DOM/HTMLDataListElement">HTMLDataListElement</a></code> interface.</p>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;input list="browsers" /&gt;
&lt;datalist id="browsers"&gt;
  &lt;option value="Chrome"&gt;
  &lt;option value="Firefox"&gt;
  &lt;option value="Internet Explorer"&gt;
  &lt;option value="Opera"&gt;
  &lt;option value="Safari"&gt;
<p>{{ HTMLLiveSample("datalist.html") }}</p>
<p>This HTML&nbsp;renders thusly in Firefox 4:</p>
<p><img alt="datalist.png" class="internal default" src="/@api/deki/files/4982/=datalist.png" /></p>
<h2 id="Compatibility">Compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <td>Basic support</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>{{ CompatNo() }}</td>
<div id="compat-mobile">
  <table class="compat-table">
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
        <td>Basic support</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
<h2 id="See_also">See also</h2>
  <li class="last">The {{ HTMLElement("input") }} element, and more specifically its {{ htmlattrxref("list", "input") }} attribute;</li>
  <li class="last">The {{ HTMLElement("option") }} element.</li>
Revert to this revision