1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
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><optgroup></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;"><optgroup></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"><select>
<optgroup label="Grupo 1">
<option>Opção 1.1</option>
</optgroup>
<optgroup label="Grupo 2">
<option>Opção 2.1</option>
<option>Opção 2.2</option>
</optgroup>
<optgroup label="Grupo 3" disabled>
<option>Opção 3.1</option>
<option>Opção 3.2</option>
<option>Opção 3.3</option>
</optgroup>
</select>
</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', '<optgroup>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</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>
|
