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
|
---
title: <label>
slug: Web/HTML/Elemento/label
translation_of: Web/HTML/Element/label
---
<h2 id="Resumen">Resumen</h2>
<p>El<em> </em><strong>Elemento </strong><strong style="line-height: 1.5;">HTML </strong><strong style="line-height: 1.5;"><code style="font-size: 14px;"><label> </code></strong><span style="line-height: 1.5;">representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un control ya sea mediante la utilizacion del atributo </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">for</span><span style="line-height: 1.5;">, o ubicando el control dentro del elemento </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">label</span><span style="line-height: 1.5;">. Tal control es llamado "el control etiquetado" del elemento </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">label</span><span style="line-height: 1.5;">.</span></p>
<ul class="htmlelt">
<li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorias</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenido de flujo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">contenido interactivo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">elemento de formulario asociado</a>, contenido palpable.</li>
<li><dfn>Contenido permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Contenido de fraseo</a>, pero no otros componentes <code>label</code> ni otros elementos etiquetables a parte del de control ya etiquetado.</li>
<li><dfn>Omision del Tag</dfn> {{no_tag_omission}}</li>
<li><dfn>Elementos padre permitidos</dfn> Cualquier elemento que acepte el <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</li>
<li><dfn>DOM interface</dfn> {{domxref("HTMLLabelElement")}}</li>
</ul>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento incluye los <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p>
<dl>
<dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} {{HTMLVersionInline("5")}}</dt>
<dd>Una tecla de atajo para acceder a este elemento desde el teclado.</dd>
<dt>{{htmlattrdef("for")}}</dt>
<dd>El ID del elemento de formulario etiquetable relacionado en el mismo documento que el elemento <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">label</span><span style="line-height: 1.5;">. El primer elemento en el documento con tal ID que coincida con el dispuesto en el atributo </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">for</span><span style="line-height: 1.5;"> será el control etiquetado para este elemento.</span></dd>
<dd>
<div class="note"><strong>Nota:</strong> Un elemento label puede contener ambos; El atributo for y el elemento de control anidado, siempre y cuando el atributo for <span style="line-height: 1.5em;">apunte al mismo elemento. </span></div>
</dd>
<dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
<dd>El formulario con el cual el label está asociado (su formulario dueño). El valor de este atributo debe ser un ID del elemento {{HTMLElement("form")}} en el mismo documento. Si este atributo no es especificado, este elemento <code><label></code> deberia ser descendiente de un elemento {{HTMLElement("form")}}. Este atributo permite ubicar el elemento label en cualquier lugar dentro del documento y no solo como descendiente de su respectivo formulario.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<pre class="brush: html"><!-- Un simple ejemplo de un label con el atributo for -->
<label for="Name">Click me</label>
<input type="text" id="Name" name="Name" />
<!-- Aun mas simple -->
<label>Click me <input type="text" id="Name" name="Name" /></label></pre>
<h3 id="Resultado">Resultado</h3>
<p><label>Click me <input></label></p>
<h2 id="Specifications" name="Specifications">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificacion</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '<label>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '<label>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad">Compatibilidad</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Caracteristica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte basico</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>Caracteristica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte basico</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_<label>_elements">Click events in nested <code><label></code> elements</h4>
<p>Starting with Gecko 8.0 {{geckoRelease("8.0")}}, a bubbling click event triggers at most one <code><label></code>, and the synthetic click event cannot trigger additional <code><label></code>s. In Gecko, a click event will still bubble up past a <code><label></code>, while in WebKit or Internet Explorer the click event will stop at the <code><label></code>. The behavior prior to Gecko 8.0 (triggering multiple <code><label></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>
|
