---
title: <optgroup>
slug: Web/HTML/Element/optgroup
tags:
  - Element
  - Forms
  - HTML
  - HTML forms
  - Reference
  - Web
translation_of: Web/HTML/Element/optgroup
---
<h2 id="Sumari">Sumari</h2>

<p>En un formulari web, l'<strong>element HTML <code>&lt;optgroup&gt;</code></strong> crea una agrupació d'opcions dins d'un element {{HTMLElement ("select")}}.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categories de contingut</a></th>
   <td>Cap.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td>Zero o més elements {{HTMLElement("option")}} .</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td><span id="result_box" lang="ca"><span>L'etiqueta</span> <span>d'inici és</span> <span>obligatòria.</span> <span>L'etiqueta</span> <span>de tancament</span> <span>és</span> <span>opcional si</span> <span>aquest</span> <span>element</span> <span>és seguit</span> <span>immediatament</span> <span>per un altre</span> <span>element</span> <code><span>&lt;</span><span>optgroup</span><span>&gt;</span></code><span>,</span> <span>o</span> <span>si l'element</span> <span>pare no</span> <span>té</span> <span>més</span> <span>contingut.</span></span></td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Un element {{HTMLElement("select")}}.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLOptGroupElement")}}</td>
  </tr>
 </tbody>
</table>

<p>{{Note("Optgroup elements may not be nested.")}}</p>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributs globals</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>Si aquest atribut booleà està establert, cap dels elements en aquest grup d'opcions es pot seleccionar. Sovint, els navegadors no habiliten aquest control i no reben cap esdeveniment de navegació, com clics del ratolí o els relacionats amb l'enfocament.</dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>El nom del grup d'opcions, que el navegador pot utilitzar en etiquetar les opcions de la interfície d'usuari. Aquest atribut és obligatori si s'utilitza aquest element.</dd>
</dl>

<h2 id="Exemple">Exemple</h2>

<pre class="brush: html">&lt;select&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option&gt;Option 1.1&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option&gt;Option 2.1&lt;/option&gt;
    &lt;option&gt;Option 2.2&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 3" disabled&gt;
    &lt;option&gt;Option 3.1&lt;/option&gt;
    &lt;option&gt;Option 3.2&lt;/option&gt;
    &lt;option&gt;Option 3.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</pre>

<h3 id="Resultat">Resultat</h3>

<p>{{EmbedLiveSample("Example")}}</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</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">Navegadors compatibles</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>Suport bàsic</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>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veure">Veure</h2>

<ul>
 <li>Altres elements relacionats amb formularis: {{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")}} and {{HTMLElement("meter")}}.</li>
</ul>

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