Manual de Referência HTML

大全 de Tags HTML

HTML: <optgroup> tag

A tag <optgroup> em HTML cria um grupo de opções na lista suspensa do controle <select>. Esses valores de lista suspensa são definidos por uma série de tags <option> e agrupados usando a tag <optgroup>. O valor do <optgroup> label será exibido como um título cinza acima dos itens de grupo no controle <select>. Este rótulo também é conhecido como elemento <optgroup>.

Exemplo online

Combine opções relacionadas usando a tag <optgroup>:

Exemplo

!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Uso do tag <optgroup> em HTML (Tutorial Básico da Web oldtoolbag.com)</title>
</head>
<body>
　　<label for="tutorial_choice">Tutoriais:　</label>
　　<select id="tutorial_choice">
　　　　<optgroup label="Web">
　　　　　　<option value="html">HTML</option>
　　　　　　<option value="css">CSS</option>
　　　　</optgroup>
　　　　<optgroup label="Database">
　　　　　　<option value="sql">SQL</option>
　　　　　　<option value="oracle">Oracle</option>
　　　　</optgroup>
　　</select>
</body>
</html>

Teste e veja ‹/›

Neste HTML5No exemplo de documento, usamos a marca <optgroup> para criar dois grupos de opções na lista suspensa. O título do primeiro grupo de opções é Web, e contém dois valores de lista suspensa-HTML e CSS. O título do segundo grupo de opções é “Banco de dados”, e contém dois valores de lista suspensa-SQL e Oracle.

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

A maioria dos navegadores populares suporta a etiqueta <optgroup>.

Definição e instruções de uso da etiqueta

A etiqueta <optgroup> organiza um grupo de etiquetas <option> em um grupo de opções com um título de grupo.

O valor da <optgroup> será exibido como um título cinza. Todos os itens do grupo serão exibidos como uma lista de opções indentadas abaixo do título.

Por padrão, a primeira opção da etiqueta <select> será exibida como o item selecionado. O usuário pode escolher outra opção na lista suspensa.

Se você tiver muitos grupos de opções, você pode usar a etiqueta <optgroup> para agrupar opções relacionadas de forma simples.

Atributo

Atributo	Valor	Descrição
Desativado	Desativado	Define que o grupo de opções deve ser desativado.
Rótulo	Texto	Define a descrição para o grupo de opções.

Atributos globais

A etiqueta <optgroup> suporta atributos globais, consulte a tabela de atributos completa Atributos globais HTML.

atributos de eventos

A etiqueta <optgroup> suporta todos Atributos de eventos HTML.

HTML: <option> tag HTML: <ol> tag