---
title: <optgroup>
slug: Web/HTML/Element/optgroup
tags:
  - Element
  - Elemento
  - Forms
  - HTML
  - HTML forms
  - Reference
  - Web
translation_of: Web/HTML/Element/optgroup
---
<h2 id="Sumário">Sumário</h2>
<p>Em um Formulário Web, o elemento HTML <code>&lt;optgroup&gt;</code> cria um agrupamento de opções dentro do elemento {{HTMLElement("select")}}.</p>
<ul class="htmlelt">
 <li><dfn><a href="/pt-BR/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn> Nenhuma.</li>
 <li><dfn>Conteúdo permitido</dfn>Nenhum ou mais elementos do tipo  {{HTMLElement("option")}}.</li>
 <li><dfn>Omissão da tag</dfn>A abertura da tag é obrigatória. O fechamento da tag é opcional se o elemento é imediatamente seguido de de outro elemento <span style="font-family: Courier New;">&lt;optgroup&gt;</span>, ou se o elemento pai não tiver nenhum conteúdo.</li>
 <li><dfn>Elemento pai permitido</dfn>Um elemento {{HTMLElement("select")}}.</li>
 <li><dfn>Interface DOM</dfn> {{domxref("HTMLOptGroupElement")}}</li>
</ul>
<p>{{Note("Elementos do tipo <strong>optgroup</strong> não podem ser aninhados.")}}</p>
<h2 id="Atributos">Atributos</h2>
<p><span style="line-height: 21px;"><span class="short_text" id="result_box" lang="pt"><span class="hps">Este</span> <span class="hps">elemento</span> <span class="hps">inclui</span> <span class="hps">os</span><a href="/pt-BR/docs/HTML/Global_attributes"> <span class="hps">atributos</span> <span class="hps">globais</span></a><span class="hps">.</span></span></span></p>
<dl>
 <dt>
  {{htmlattrdef("disabled")}}</dt>
 <dd>
  <span id="result_box" lang="pt"><span class="hps">Se este</span> <span class="hps">atributo booleano</span> <span class="hps">for definido,</span> nenhum dos itens neste <strong>optgroup</strong> poderá ser selecionado</span>. Muitos navegadores marcam como cinza e não permitem que o elemento receba nenhum evento de navegação, como cliques do mouse ou foco.</dd>
 <dt>
  {{htmlattrdef("label")}}</dt>
 <dd>
  É o nome do optgroup, é o que os navegadores irão exibir como rótulo. Este atributo é obrigatório se o elemento for usado.</dd>
</dl>
<h2 id="Exemplo">Exemplo</h2>
<pre class="brush: html">&lt;select&gt;
  &lt;optgroup label="Grupo 1"&gt;
    &lt;option&gt;Opção 1.1&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Grupo 2"&gt;
    &lt;option&gt;Opção 2.1&lt;/option&gt;
    &lt;option&gt;Opção 2.2&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Grupo 3" disabled&gt;
    &lt;option&gt;Opção 3.1&lt;/option&gt;
    &lt;option&gt;Opção 3.2&lt;/option&gt;
    &lt;option&gt;Opção 3.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</pre>
<h3 id="Resultado">Resultado</h3>
<p>{{EmbedLiveSample("Exemplo")}}</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Característica</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>{{CompatVersionUnknown}}</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>Característica</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>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
 <li>Outros elementos de formularios relacionados: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} e {{HTMLElement("meter")}}.</li>
</ul>
<p>{{HTMLRef}}</p>