---
title: <option>
slug: Web/HTML/Element/option
translation_of: Web/HTML/Element/option
---
<h2 id="Sumário">Sumário</h2>
<p>Em um formulário Web, o <strong>elemento HTML</strong> <code>&lt;option&gt;</code> é usado para criar um controle que representa um item dentro de um elemento HTML5 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}.</p>
<ul class="htmlelt">
 <li><dfn><a href="/pt-BR/docs/Web/HTML/Categorias_de_conteúdo" title="HTML/Categorias_de_conteúdo">Categorias de conteúdo</a></dfn> Nenhuma.</li>
 <li><dfn>Conteúdo permitido</dfn> Texto com caracteres escapados (como <code>&amp;eacute;</code>) ocasionalmente.</li>
 <li><dfn>Omissão de tags</dfn> A tag de abertura é obrigatória. A tag de fechamento é opcional se este elemento é imediatamente seguido por um outro elemento <code>&lt;option&gt;</code> ou um {{HTMLElement("optgroup")}}, ou se o elemento pai não tem mais nenhum conteúdo.</li>
 <li><dfn>Elementos pai permitidos</dfn> {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}.</li>
 <li><dfn>Interface DOM</dfn> {{domxref("HTMLOptionElement")}}</li>
</ul>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento inclui os <a href="/pt-BR/docs/Web/HTML/Atributos_globais" title="HTML/Atributos globais">atributos globais</a>.</p>
<dl>
 <dt>
  {{htmlattrdef("disabled")}}</dt>
 <dd>
  Se este atributo booleano estiver definido, esta opção não é selecionável. Frequentemente navegadores acinzentam este tipo de controle, e ele deixa de receber quaisquer eventos de navegação, como cliques do mouse ou eventos relacionados a foco. Se este atributo não estiver definido, o elemento ainda pode ser desabilitado se um de seus ancestrais é um elemento {{HTMLElement("optgroup")}} desabilitado.</dd>
 <dt>
  {{htmlattrdef("label")}}</dt>
 <dd>
 Este atributo é o texto para o rótulo indicando o significado da opção. Se o atributo <strong>label</strong> não estiver definido, seu valor é o conteúdo de texto do elemento.<br>
  <div class="note">
   <em>Nota de uso: </em>o atributo <strong>label</strong> é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo <strong>value</strong> descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo.</div>
 </dd>
 <dt>
  {{htmlattrdef("selected")}}</dt>
 <dd>
  Se presente, este atributo booleano indica que a opção está selecionada inicialmente. Se o elemento <code>&lt;option&gt;</code> for descendente de um elemento {{HTMLElement("select")}} cujo atributo {{htmlattrxref("multiple", "select")}} não está definido, apenas um único <code>&lt;option&gt;</code> deste elemento {{HTMLElement("select")}} pode ter o atributo <strong>selected</strong>.</dd>
 <dt>
  {{htmlattrdef("value")}}</dt>
 <dd>
  O conteúdo textual deste atributo representa o rótulo que explica a opção. Se ele não estiver definido, seu valor padrão é o texto contido no elemento.
  <div class="note">
   <em>Nota de uso:</em> o atributo <strong>label</strong> é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo <strong>value</strong> descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo.</div>
 </dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<p>Veja os exemplos do elemento {{HTMLElement("select")}}.</p>
<h2 id="Especificações" name="Especificações">Especificações</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</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">Compatibilidade com navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Funcionalidade</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>Suporte básico</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>Funcionalidade</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Suporte básico</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="Notas_do_Gecko">Notas do Gecko</h3>
<p>[1] Antes do Gecko 7.0, {{geckoRelease("7.0")}}, o atributo label devolvia incorretamente uma string vazia, se não definido, em vez de devolver o texto contido no elemento.</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
 <li>Outros elementos relacionados a formulários: {{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")}} e {{HTMLElement("meter")}}.</li>
</ul>
<p>{{HTMLRef}}</p>