files/pt-br/web/html/element/label/index.html


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
132
133
134
135
136
137
138
139
140
141
142
143

---
title: <label>
slug: Web/HTML/Element/label
translation_of: Web/HTML/Element/label
---
<h2 id="Resumo">Resumo</h2>

<p>Um <strong>elemento</strong> <strong>HTML <code>&lt;label&gt;</code> </strong>representa uma legenda para um item em uma interface de usuário. Ele pode estar associado com um elemento de controle, colocando este dentro do elemento <code>label</code>, ou usando o atributo <code>for</code>. Tal controle é chamado o <em>controle etiquetado</em> do elemento etiqueta. Um input pode ser associado a diversas etiquetas (&lt;label&gt;s).</p>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">As categorias de conteúdo</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">form-associated element</a>, palpable content.</li>
 <li><dfn>conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>, mas há elementos do rótulo descendente. Nenhum outro do que o controle rotulado elementos labelable são permitidos.</li>
 <li><dfn>Tag omissão</dfn> {{no_tag_omission}}</li>
 <li><dfn><span class="short_text" id="result_box" lang="pt">Elementos pai permitidas</span></dfn> Qualquer elemento que aceita <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
 <li><dfn>DOM interface</dfn> {{domxref("HTMLLabelElement")}}</li>
</ul>

<h2 id="Atributos">Atributos</h2>

<p>A tecla de atalho para acessar este elemento a partir do teclado.</p>

<dl>
 <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} {{HTMLVersionInline("5")}}</dt>
 <dd>A tecla de atalho para acessar este elemento a partir do teclado.</dd>
 <dt>{{htmlattrdef("for")}}</dt>
 <dd>O ID de um elemento de formulário relacionados com labelable no mesmo documento como o elemento label. O primeiro elemento tal no documento com uma ID correspondente ao valor do atributo é o controle marcado for este elemento etiqueta.
 <div class="note"><span id="result_box" lang="pt"><strong>Nota: </strong>Um elemento etiqueta pode ter tanto um for o atributo e um elemento de controlo continham, enquanto os pontos de atributo para o elemento de controlo contido.</span></div>
 </dd>
 <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
 <dd>
 <div class="almost_half_cell" id="gt-res-content">
 <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="pt">O elemento de forma que o elemento label está associado a (seu proprietário formulário). O valor do atributo deve ser uma identificação de um {{HTMLElement ("form")}} elemento no mesmo documento. Se este atributo não for especificado, este elemento &lt;label&gt; deve ser um descendente de uma {{HTMLElement ("form")}} elemento. Este atributo permite que você coloque elementos do rótulo em qualquer lugar dentro de um documento, e não apenas como descendentes de seus elementos de formulário.</span></div>
 </div>
 </dd>
</dl>

<h2 id="Exemplo">Exemplo</h2>

<h3 id="Exemplo_simples_de_label">Exemplo simples de label</h3>

<pre class="brush: html" style="font-family: 'Open Sans',sans-serif; line-height: 23.3333px;">&lt;label&gt;Click me &lt;input type="text" id="User" name="Name" /&gt;&lt;/label&gt;</pre>

<p>{{ EmbedLiveSample('Simple_label_example', '200', '50', '') }}</p>

<h3 id="Usando_o_atributo_for">Usando o atributo "for"</h3>

<pre class="brush: html" style="font-family: 'Open Sans',sans-serif; line-height: 23.3333px;">&lt;label for="User"&gt;Click me&lt;/label&gt;
&lt;input type="text" id="User" name="Name" /&gt;</pre>

<p>{{EmbedLiveSample('Using_the_.22for.22_attribute', '200', '50', '')}}</p>

<h2 id="Specifications" name="Specifications">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_de_navegadores">Compatibilidade de 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</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{compatversionunknown}}</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>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{compatversionunknown}}</td>
   <td>{{compatversionunknown}}</td>
   <td>{{compatversionunknown}}</td>
   <td>{{compatversionunknown}}</td>
   <td>{{compatversionunknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Notes">Notes</h3>

<h4 id="Click_events_in_nested_&lt;label>_elements">Click events in nested <code>&lt;label&gt;</code> elements</h4>

<p>Starting with Gecko 8.0 {{geckoRelease("8.0")}}, a bubbling click event triggers at most one <code>&lt;label&gt;</code>, and the synthetic click event cannot trigger additional <code>&lt;label&gt;</code>s. In Gecko, a click event will still bubble up past a <code>&lt;label&gt;</code>, while in WebKit or Internet Explorer the click event will stop at the <code>&lt;label&gt;</code>. The behavior prior to Gecko 8.0 (triggering multiple <code>&lt;label&gt;</code>s) caused Firefox to stop responding (see {{bug(646157)}}).</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
</ul>

<div>{{HTMLRef}}</div>