Tag label

A tag label define um rótulo para um campo de entrada do tipo input, textarea, select e assim por diante.

O rótulo é vinculado a um campo de entrada específico usando o atributo for. Nele deve-se especificar o valor do atributo id do campo de entrada ao qual o rótulo está vinculado. Também é possível vincular o rótulo a um elemento colocando esse elemento dentro da tag label. Neste caso, não é necessário especificar o atributo for. Consulte os exemplos para um melhor entendimento.

Ao clicar no rótulo, os checkboxes ou botões de rádio vinculados a ele alterarão seu estado de marcado para desmarcado e vice-versa. O rótulo, neste caso, é necessário para conveniência: é difícil acertar elementos pequenos do formulário com o cursor, e em um rótulo longo com texto - muito mais fácil.

O campo de entrada de texto vinculado ao rótulo do tipo input e textarea receberá o foco de entrada. Foco é quando o cursor pisca no campo de entrada, neste caso, se você digitar algo no teclado - o texto entrará neste campo (veja a pseudoclasse focus para um entendimento avançado de foco).

O rótulo label pode ser usado para simular um checkbox ou um botão de rádio. Isso é necessário para fazer um checkbox ou radio com seu próprio design (o que é proibido em CSS, mas com truques inteligentes é possível).

Atributos

Atributo	Descrição
for	Neste atributo, deve-se especificar o valor do atributo id do campo de entrada ao qual o rótulo label está vinculado.
accesskey	Define uma tecla de atalho que pode ser usada para navegar até o elemento do formulário vinculado ao rótulo (através do atributo for). Para mais detalhes, consulte o atributo accesskey.

Exemplo . Checkbox

Vamos vincular um rótulo à caixa de seleção checkbox usando o atributo for. Clique no rótulo e você verá a mudança de estado da caixa de seleção de marcado para desmarcado e vice-versa:

:

Exemplo . Dentro do label

Agora vamos não vincular o rótulo através do atributo for, mas sim colocar os elementos diretamente dentro da tag label, neste caso, clicando no texto label também ativaremos o elemento:

:

Exemplo . Campo de entrada de texto

Vamos vincular um rótulo à tag input usando o atributo for. Clicar no rótulo fará com que o campo de entrada receba o foco. Ao mesmo tempo, o texto contido no campo (adicionado usando o atributo value) ficará selecionado. Se você começar a digitar algo no teclado - este texto será apagado. Para se livrar da seleção, sem deletar o texto, você pode clicar com o mouse no campo de entrada: o foco não desaparecerá, mas a seleção desaparecerá:

:

Veja também