---
title: <datalist>
slug: Web/HTML/Element/datalist
tags:
  - HTML
  - HTML Formulare
  - HTML5
  - Referenz
  - Web
translation_of: Web/HTML/Element/datalist
---
<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Das <strong>HTML <span style="font-family: courier new;">&lt;datalist&gt;</span> Element</strong> enthält eine Liste von {{HTMLElement("option")}} Elementen, die mögliche Optionen für den Wert eines anderen Elementes repräsentieren.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/de/docs/HTML/Content_categories" title="HTML/Inhaltskategorien">Inhaltskategorien</a></th>
   <td><a href="/de/docs/HTML/Content_categories#Flow_content" title="HTML/Inhaltskategorien#Flussinhalt">Flussinhalt</a>, <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Inhaltskategorien#Textinhalt">Textinhalt</a>.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubter Inhalt</th>
   <td>Entweder <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Inhaltskategorien#Textinhalt">Textinhalt</a> oder null oder mehr {{HTMLElement("option")}} Elemente.</td>
  </tr>
  <tr>
   <th scope="row">Tag-Auslassung</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte Eltern-Elemente</th>
   <td>Alle Elemente, die <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Inhaltskategorien#Textinhalt">Textinhalt</a> akzeptieren.</td>
  </tr>
  <tr>
   <th scope="row">DOM-interface</th>
   <td>{{domxref("HTMLDataListElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attribute">Attribute</h2>

<p><span style="line-height: 21px;">Dieses Element verfügt nur über die </span><a href="https://developer.mozilla.org/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Globale Attribute">globalen Attribute</a><span style="line-height: 21px;">.</span></p>

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush: html">&lt;label for="myBrowser"&gt;Gib einen Browsernamen ein:&lt;/label&gt;
&lt;input list="browsers" id="myBrowser" name="myBrowser" /&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>{{EmbedLiveSample("Beispiele")}}</p>

<p>Dieses HTML wird in Firefox 4 folgendermaßen gerendert:</p>

<p><img alt="datalist.png" class="default internal" src="/@api/deki/files/4982/=datalist.png"></p>

<h2 id="Specifications" name="Specifications">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</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></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'the-datalist-element.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>



<p>{{Compat("html.elements.datalist")}}</p>

<h2 id="Polyfill">Polyfill</h2>

<p>Der folgende Polyfill wurde für den Support für ältere oder derzeit noch inkompatible Browser entwickelt:<br>
 <a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li class="last">Das {{HTMLElement("input")}} Element, und noch genauer sein {{htmlattrxref("list", "input")}} Attribut;</li>
 <li class="last">Das {{HTMLElement("option")}} Element.</li>
</ul>

<p class="last">{{HTMLRef}}</p>