Revision 332291 of <datalist>

  • Revision slug: HTML/Element/datalist
  • Revision title: <datalist>
  • Revision id: 332291
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

Summary

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

Attributes

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

DOM Interface

This element implements the HTMLDataListElement interface.

Examples

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

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

This HTML renders thusly in Firefox 4:

datalist.png

Specifications

Specification Status Comment
{{ SpecName('HTML WHATWG', 'the-button-element.html#the-datalist-element', '<datalist>') }} {{ Spec2('HTML WHATWG') }}  
{{ SpecName('HTML5 W3C', 'the-datalist-element.html#the-datalist-element', '<datalist>') }} {{ Spec2('HTML5 W3C') }}  

Browser compatibility

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

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <span style="font-family: Courier New;">&lt;datalist&gt;</span> Element</strong> contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other controls.</p>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#flow_content" title="HTML/Content categories#flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#phrasing_content" title="HTML/Content categories#phrasing content">phrasing content</a>.</li>
  <li><dfn>Permitted content</dfn> Either <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> or zero or more {{HTMLElement("option")}} elements.</li>
  <li><dfn>Tag omission</dfn> {{ no_tag_omission() }}</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
  <li><dfn>DOM interface</dfn> {{ domxref("HTMLDataListElement")}}</li>
</ul>
<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;
&lt;/datalist&gt;
</pre>
<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="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('HTML WHATWG', 'the-button-element.html#the-datalist-element', '&lt;datalist&gt;') }}</td>
      <td>{{ Spec2('HTML WHATWG') }}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{ SpecName('HTML5 W3C', 'the-datalist-element.html#the-datalist-element', '&lt;datalist&gt;') }}</td>
      <td>{{ Spec2('HTML5 W3C') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>20</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10</td>
        <td>9.5</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatNo()}}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{CompatNo()}}</td>
        <td>10</td>
        <td>{{CompatNo()}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li class="last">The {{ HTMLElement("input") }} element, and more specifically its {{ htmlattrxref("list", "input") }} attribute;</li>
  <li class="last">The {{ HTMLElement("option") }} element.</li>
</ul>
Revert to this revision