---
title: <option>
slug: Web/HTML/Element/option
tags:
  - Elemento
  - Formulários HTML
  - Referencia
  - Web
  - formulários
  - htmls
translation_of: Web/HTML/Element/option
original_slug: Web/HTML/Elemento/option
---
<div>{{HTMLRef}}</div>

<p>En un formulario Web , el <strong>elemento</strong> <strong>HTML<em> </em><code>&lt;option&gt;</code><em>  </em></strong>se usa para representar un item dentro de un {{HTMLElement("select")}}, un  {{HTMLElement("optgroup")}} o un  elemento HTML5 {{HTMLElement("datalist")}} .</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Contenido de las categorías</a></th>
   <td>Ninguna</td>
  </tr>
  <tr>
   <th scope="row">Contenido permitido</th>
   <td>Texto con,  eventualmente, caracteres especiales (como <code>&amp;eacute;</code>).</td>
  </tr>
  <tr>
   <th scope="row">Omisión de etiqueta</th>
   <td>La etiqueta de inicio es obligatoria. La etiqueta de finalización es opcional siempre que el elemento esté inmediatamente seguido por otro elemento<code> &lt;option&gt;</code> , por un {{HTMLElement("optgroup")}}, o si el elemento padre tiene no tiene más contenido</td>
  </tr>
  <tr>
   <th scope="row">Elementos padre permitidos</th>
   <td> {{HTMLElement("select")}}, o {{HTMLElement("optgroup")}} o un elemento {{HTMLElement("datalist")}} element.</td>
  </tr>
  <tr>
   <th scope="row">Interfaz DOM</th>
   <td>{{domxref("HTMLOptionElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento posee los  <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p>

<dl>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>Si está establecido el elemento no se puede seleccionar. A menudo los navegadores ponen en gris el elemento y de esa manera no recibirá ningún evento de navegación como clicks de ratón o eventos relacionados con la obtención del foco. Si este atributo no está definido el elemento puede ser aún deshabilitado si uno de sus ancestros es un elemento {{HTMLElement("optgroup")}} deshabilitado.</dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>Este atributo es el texto para la etiqueta que determina el significado de la opción. Si el atributo <code><strong>label</strong></code> no está definidio su valor será el texto del contenido del elemento
 <div class="note"><em>Nota de Uso:  </em>El atributo <strong>label</strong> está diseñado para contener una etiqueta corta que se usará típicamente en un menú jerárquico. El <strong><code>atributo value</code></strong> describe una etiqueta más larga para ser usada, por ejemplo, cerca de un radio button</div>
 </dd>
 <dt>{{htmlattrdef("selected")}}</dt>
 <dd>Si está presente, este atributo booleano indica si esta opción es la inicialmente seleccionada. Si el elemento <code>&lt;option&gt; es descendiente de un elemento </code>{{HTMLElement("select")}} cuyo  atributo {{htmlattrxref("multiple", "select")}}  no esté definidio únicamente un sólo  <code>&lt;option&gt;</code> de este elemento  {{HTMLElement("select")}} puede tener este atributo <strong>selected</strong> attribute.</dd>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>El contenido de este atributo representa el valor que será enviado al enviar el formulario si una determinada opción está seleccionada. Si se omite el atributo el valor  se tomará del texto del contenido del elemento option.</dd>
</dl>

<h2 id="Ejemplos">Ejemplos</h2>

<p>Ver los ejemplos {{HTMLElement("select")}}.</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</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>
    <p>Definición inicial</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</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>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></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>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Gecko no muestra el valor del atributo label como texto de la opción en caso de que el contenido del elemento esté vacío. Ver {{bug("1205213")}}.</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>Otro elemento relacionados con formularios: {{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")}} and {{HTMLElement("meter")}}.</li>
</ul>