Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship


Revision 21463 of <datalist>

  • Revision slug: HTML/Element/datalist
  • Revision title: datalist
  • Revision id: 21463
  • Created:
  • Creator: McGurk
  • Is current revision? No
  • Comment Fixed global attributes link and added example; 57 words added

Revision Content

{{ HTMLVersionHeader("5") }}{{ gecko_minversion_header("2") }}

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


<datalist id="browsers"> </datalist>

See also

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

Revision Source

<p>{{ HTMLVersionHeader("5") }}{{ gecko_minversion_header("2") }}</p>
<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>
<h3>Usage context</h3>
<table class="standard-table"> <tbody> <tr> <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> </tr> <tr> <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> </tr> <tr> <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> </tr> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-datalist-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-datalist-element">HTML5, section 4.10.10</a></td> </tr> </tbody>
<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>
<div id="section_3">
<div id="section_3">
<h3 class="editable">DOM Interface</h3>
<p>This element implements the <code><a href="/en/DOM/HTMLDataListElement" title="en/DOM/HTMLDataListElement">HTMLDataListElement</a></code> interface.</p>
<pre>&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><input><img align="absmiddle" alt="" class="ife_marker" id="null_ife_marker_0" src="chrome://informenter/skin/marker.png" style="border: 0pt none; width: 14px; height: 19px; cursor: pointer; display: inline;" title="Max field length is unknown"> &lt;datalist id="browsers"&gt; &lt;/datalist&gt;</p>
<h3>See also</h3>
<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>
Revert to this revision