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
|
---
title: <option>
slug: Web/HTML/Element/option
translation_of: Web/HTML/Element/option
---
<h2 id="Sumário">Sumário</h2>
<p>Em um formulário Web, o <strong>elemento HTML</strong> <code><option></code> é usado para criar um controle que representa um item dentro de um elemento HTML5 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}.</p>
<ul class="htmlelt">
<li><dfn><a href="/pt-BR/docs/Web/HTML/Categorias_de_conteúdo" title="HTML/Categorias_de_conteúdo">Categorias de conteúdo</a></dfn> Nenhuma.</li>
<li><dfn>Conteúdo permitido</dfn> Texto com caracteres escapados (como <code>&eacute;</code>) ocasionalmente.</li>
<li><dfn>Omissão de tags</dfn> A tag de abertura é obrigatória. A tag de fechamento é opcional se este elemento é imediatamente seguido por um outro elemento <code><option></code> ou um {{HTMLElement("optgroup")}}, ou se o elemento pai não tem mais nenhum conteúdo.</li>
<li><dfn>Elementos pai permitidos</dfn> {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}.</li>
<li><dfn>Interface DOM</dfn> {{domxref("HTMLOptionElement")}}</li>
</ul>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento inclui os <a href="/pt-BR/docs/Web/HTML/Atributos_globais" title="HTML/Atributos globais">atributos globais</a>.</p>
<dl>
<dt>
{{htmlattrdef("disabled")}}</dt>
<dd>
Se este atributo booleano estiver definido, esta opção não é selecionável. Frequentemente navegadores acinzentam este tipo de controle, e ele deixa de receber quaisquer eventos de navegação, como cliques do mouse ou eventos relacionados a foco. Se este atributo não estiver definido, o elemento ainda pode ser desabilitado se um de seus ancestrais é um elemento {{HTMLElement("optgroup")}} desabilitado.</dd>
<dt>
{{htmlattrdef("label")}}</dt>
<dd>
Este atributo é o texto para o rótulo indicando o significado da opção. Se o atributo <strong>label</strong> não estiver definido, seu valor é o conteúdo de texto do elemento.<br>
<div class="note">
<em>Nota de uso: </em>o atributo <strong>label</strong> é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo <strong>value</strong> descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo.</div>
</dd>
<dt>
{{htmlattrdef("selected")}}</dt>
<dd>
Se presente, este atributo booleano indica que a opção está selecionada inicialmente. Se o elemento <code><option></code> for descendente de um elemento {{HTMLElement("select")}} cujo atributo {{htmlattrxref("multiple", "select")}} não está definido, apenas um único <code><option></code> deste elemento {{HTMLElement("select")}} pode ter o atributo <strong>selected</strong>.</dd>
<dt>
{{htmlattrdef("value")}}</dt>
<dd>
O conteúdo textual deste atributo representa o rótulo que explica a opção. Se ele não estiver definido, seu valor padrão é o texto contido no elemento.
<div class="note">
<em>Nota de uso:</em> o atributo <strong>label</strong> é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo <strong>value</strong> descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo.</div>
</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<p>Veja os exemplos do elemento {{HTMLElement("select")}}.</p>
<h2 id="Especificações" name="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '<option>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_navegadores" name="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</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>{{CompatGeckoMobile("1.0")}} [1]</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>Funcionalidade</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>{{CompatGeckoMobile("1.0")}} [1]</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h3 id="Notas_do_Gecko">Notas do Gecko</h3>
<p>[1] Antes do Gecko 7.0, {{geckoRelease("7.0")}}, o atributo label devolvia incorretamente uma string vazia, se não definido, em vez de devolver o texto contido no elemento.</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>Outros elementos relacionados a formulários: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} e {{HTMLElement("meter")}}.</li>
</ul>
<p>{{HTMLRef}}</p>
|
