<optgroup>

Grupo de Opções

Definição:

A tag <optgroup> vem do inglês option group e significa grupo de opções.

Esta tag define um grupo de opções em um controle do tipo caixa de seleção onde usuários podem selecionar um ou mais valores em uma lista.

A tag deve ser utilizada no contexto de um formulário definido pela tag <form> e da definição de uma caixa de seleção dada pela tag <select>.

Os elementos da caixa de seleção definidos através da tag <option> serão agrupados se colocados entre as tags <optgroup> e </optgroup>.

Suporte:

Netscape: 6.0
Internet Explorer: 6.0
Aceito nas especificações DTD: Estrito, Transicional e Frameset

Dicas:

O grupo de opções oferece uma forma de melhor de categorizar as as opções na caixa de seleção.

O título definido através do atributo label aparecerá na caixa de seleção, porém não poderá ser selecionado pelo usuário. Em geral o título é mostrado com formatação negrito e itálico. 

Não é possível definir grupos de seleção dentro de outros (aninhar).

Exemplo:

Código Resultado

Selecione uma cidade:
<select>
<optgroup label="São Paulo">
<option value="1">Araraquara</option>
<option value="2">Assis</option>
</optgroup>
<optgroup label="Rio de Janeiro">
<option value="3">Angra dos Reis</option>
<option value="4">Búzios</option>
</optgroup>
</select>

Selecione uma cidade:

Atributo Obrigatório:

Atributo Valor Descrição
label texto Especifica um título para o grupo de seleção no controle de caixa de seleção. Este valor não poderá ser selecionado pelo usuário e sua apresentação pelo navegador é em negrito e itálico. As opções de seleção serão indentadas em relação ao título.

Atributos Padrão:

class, dir, id, lang, style, title

Atributo Opcional:

Atributo Valor Descrição
disabled disabled Se este atributo for especificado, todas as opções do grupo serão desabilitadas. Este atributo não parece ter nenhum efeito no Internet Explorer ao passo que o FireFox corretamente desabilita as opções do grupo.

Eventos Associados:

onclick, ondblclickonkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup