--- title: slug: Web/HTML/Element/label translation_of: Web/HTML/Element/label ---

Resumo

Um elemento HTML <label> 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 label, ou usando o atributo for. Tal controle é chamado o controle etiquetado do elemento etiqueta. Um input pode ser associado a diversas etiquetas (<label>s).

As categorias de conteúdo Flow content, phrasing content, interactive content, form-associated element, palpable content.
conteúdo permitido Phrasing content, mas há elementos do rótulo descendente. Nenhum outro do que o controle rotulado elementos labelable são permitidos.
Tag omissão {{no_tag_omission}}
Elementos pai permitidas Qualquer elemento que aceita phrasing content.
DOM interface {{domxref("HTMLLabelElement")}}

Atributos

A tecla de atalho para acessar este elemento a partir do teclado.

{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} {{HTMLVersionInline("5")}}: A tecla de atalho para acessar este elemento a partir do teclado.
{{htmlattrdef("for")}}: 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.
Nota: 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.
{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}: 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 <label> 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.

Exemplo

Exemplo simples de label

<label>Click me <input type="text" id="User" name="Name" /></label>

Usando o atributo "for"

<label for="User">Click me</label>
<input type="text" id="User" name="Name" />

{{EmbedLiveSample('Using_the_.22for.22_attribute', '200', '50', '')}}

Especificações

Specification	Status	Comment
{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '<label>')}}	{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '<label>')}}	{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}	{{Spec2('HTML4.01')}}

Compatibilidade com navegadores

Característica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	{{compatversionunknown}}	{{compatversionunknown}}	{{compatversionunknown}}	{{compatversionunknown}}	{{compatversionunknown}}

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	{{compatversionunknown}}	{{compatversionunknown}}	{{compatversionunknown}}	{{compatversionunknown}}	{{compatversionunknown}}

Notes

Click events in nested `<label>` elements

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