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

<p>Im Rahmen eines Web Formulars erzeugt das <strong>HTML<em> </em><code>&lt;option&gt;</code><em> </em>Element </strong>einen innerhalb eines HTML5 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} oder {{HTMLElement("datalist")}} Elements zur Auswahl angezeigten Eintrag.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorie</a></th>
   <td>Keine.</td>
  </tr>
  <tr>
   <th scope="row">Zugelassene Inhalte</th>
   <td>Text mit bedarfsweise in HTML Sequenzen umgewandelten Spezial- und Sonderzeichen, wie z.B. <code>&amp;eacute;</code>.</td>
  </tr>
  <tr>
   <th scope="row">Verhalten bei Auslassung</th>
   <td>Im Gegensatz zum einleitenden Tag kann das beendende Tag ausgelassen werden, sofern diesem direkt ein weiteres <code>&lt;option&gt;</code> oder {{HTMLElement("optgroup")}} Element folgt, oder aber, wenn das Elternelement keine weiteren Inhalte enthält.</td>
  </tr>
  <tr>
   <th scope="row">Zugelassene Elternelemente</th>
   <td>Ein {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} oder {{HTMLElement("datalist")}} Element.</td>
  </tr>
  <tr>
   <th scope="row">DOM Schnittstelle</th>
   <td>{{domxref("HTMLOptionElement")}}</td>
  </tr>
 </tbody>
</table>

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

<p><span style="line-height: 21px;">Dieses Element berücksichtigt die </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>Dieser boolesche Wert kennzeichnet diesen Eintrag als nicht auswählbar. Im Regelfall werden nicht auswählbare Einträge in der Darstellung ausgegraut und erhalten keine Benachrichtigungen über Mausclicks, Fokus etc. mehr vom Browser. Ein Element kann darüber hinaus auch deshalb nicht auswählbar sein, weil ein ihm übergeordnetes {{HTMLElement("optgroup")}} Element inaktiviert ist.</dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>Dieses Attribut kann eine kurze erläuternde Informationen zur Bedeutung der jeweiligen Auswahl enthalten. Wurde dem <code><strong>label</strong></code> Attribut kein Inhalt explizit zugewiesen, enthält es den Textinhalt des Auswahlpunktes selbst.
 <div class="note"><em>Hinweis zur Nutzung: </em>Ein <code><strong>label</strong></code> Attribut sollte lediglich eine kurze Erläuterung enthalten, wie sie z.B. im Rahmen eines Auswahlmenüs sinnvoll ist. Für längere Beschreibungen, z.B. den neben Radiobuttons und Auswahlschaltflächen angezeigten Text, wurde das <strong><code>value</code></strong> Attribut vorgesehen.</div>
 </dd>
 <dt>{{htmlattrdef("selected")}}</dt>
 <dd>Wenn angegeben, kennzeichnet dieser boolesche Wert, ob die betreffende Auswahl initial bereits als angewählt gekennzeichnet ist. Wenn das betreffende<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">&lt;option&gt;</code><span style="line-height: 1.5;"> Element einem {{HTMLElement("select")}} Element untergeordnet ist, dessen Attribut für Mehrfachauswahl {{htmlattrxref("multiple", "select")}} nicht gesetzt ist, darf nur ein einziges </span><code style="font-style: normal; line-height: 1.5;">&lt;option&gt;</code><span style="line-height: 1.5;"> Element des beinhaltenden {{HTMLElement("select")}} über ein </span><strong style="line-height: 1.5;">selected</strong><span style="line-height: 1.5;"> Attribut verfügen.</span></dd>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>Dieses Attribut kann eine textuelle Erläuterung zur Bedeutung der betreffenden Auswahl enthalten. Wurde diesem Attribut kein Inhalt explizit zugewiesen, enthält es den Textinhalt des Auswahlpunktes selbst<span style="line-height: 1.5;">.</span></dd>
 <dd>
 <div class="note"><em>Hinweis zur Nutzung: </em>Ein <code style="font-style: italic;"><strong>label</strong></code> Attribut sollte lediglich eine kurze Erläuterung enthalten, wie sie z.B. im Rahmen eines Auswahlmenüs sinnvoll ist. Für längere Beschreibungen, z.B. den neben Radiobuttons und Auswahlschaltflächen angezeigten Text, wurde das <strong><code>value</code></strong> Attribut vorgesehen.</div>
 </dd>
</dl>

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

<p>Siehe Beispiele bei {{HTMLElement("select")}}.</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '&lt;option&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;option&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browserunterstützung</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 (WebKit)</th>
  </tr>
  <tr>
   <td>Grundlegend unterstützt</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</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 Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Grundlegend unterstützt</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Gecko_notes">Gecko notes</h3>

<p>[1] In Versionen vor Gecko 7.0, {{geckoRelease("7.0")}}, enthielt ein nicht explizit spezifiziertes label Attribut fälschlicherweise überhaupt keinen Inhalt, anstatt den textuellen Inhalt des Auswahlpunktes selbst.</p>

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

<ul>
 <li>Weitere Elemente mit Bezug auf Formulare: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} und {{HTMLElement("meter")}}.</li>
</ul>

<p>{{HTMLRef}}</p>