O que o atributo "for" faz na tag HTML <label>?

382

Gostaria de saber qual é a diferença entre os seguintes dois trechos de código:

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

e

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

Tenho certeza de que faz alguma coisa quando você usa uma biblioteca JavaScript especial, mas, além disso, ela valida o HTML ou é necessário por algum outro motivo?

— jeff
fonte

578

A <label>tag permite que você clique no rótulo e será tratada como clicar no elemento de entrada associado. Existem duas maneiras de criar essa associação:

Uma maneira é envolver o elemento label ao redor do elemento de entrada:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

A outra maneira é usar o foratributo, fornecendo o ID da entrada associada:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

Isso é especialmente útil para uso com caixas de seleção e botões, pois significa que você pode marcar a caixa clicando no texto associado em vez de ter que bater na própria caixa.

Leia mais sobre esse elemento no MDN .

— Barmar
fonte

106

Observe que o atributo for está vinculado à entrada pelo atributo id, e o atributo name não precisa corresponder. <label for = "theinput"> Input aqui: </ label> <type = input name 'text' = 'notmatching' id = 'theinput'> continuará a funcionar

— Glo

4

Um clique no rótulo nem sempre é tratado exatamente como clicar no elemento associado. No Chrome e Safari, por exemplo, clicar em um rótulo associado a um selectitem apenas coloca o foco na seleção em vez de expandir as opções.

— Emile Pels

2

@EmilePels No que diz respeito ao modelo de eventos do navegador, eles são equivalentes. O que você está descrevendo é mais sobre a interface do usuário fornecida pelo manuseio de menus suspensos do sistema operacional, vinculado ao próprio mouse.

— Barmar 8/16

3

Parece importante mencionar que é muito relevante para acessibilidade e leitores de tela, por que usá-lo ativamente.

— coyotte508

11

Eu estava lutando nas últimas duas horas com o clique do corpo levantado duas vezes cada vez que clico em um rótulo em um formulário com o atributo "for" em um campo de entrada. Finalmente entendo por que, mesmo que eu use stopPropagation no clique do rótulo, por que o clique do corpo ainda foi gerado ... por causa do clique gerado pelo campo de entrada, seguindo o comportamento que você descreveu.

— Samuel

53

O foratributo associa o rótulo a um elemento de controle, conforme definido na descrição da labelespecificação HTML 4.01. Isso implica, entre outras coisas, que quando o labelelemento recebe o foco (por exemplo, ao ser clicado), passa o foco para o controle associado. A associação entre um rótulo e um controle também pode ser usada por agentes de usuário baseados em fala, o que pode fornecer ao usuário uma maneira de perguntar qual é o rótulo associado ao lidar com um controle. (A associação pode não ser tão óbvia quanto na renderização visual.)

No primeiro exemplo da pergunta (sem o for), o uso da labelmarcação não tem implicações lógicas ou funcionais - é inútil, a menos que você faça algo com isso em CSS ou JavaScript.

As especificações HTML não tornam obrigatório associar rótulos a controles, mas as Diretrizes de acessibilidade de conteúdo da Web (WCAG) 2.0 o fazem. Isso está descrito no documento técnico H44: Usando elementos de rótulo para associar rótulos de texto a controles de formulário , o que também explica que a associação implícita (ao aninhar, por exemplo, inputdentro label) não é tão amplamente suportada quanto a associação explícita via fore idatributos,

— Jukka K. Korpela
fonte

10

+1 por falar sobre o relacionamento semântico e o que significa além do relacionamento funcional de cliques.

— Ulty4life 13/08/2015

Oi, eu tenho dois elementos com o mesmo id, mas em div diferente, eu adicionei o evento focus usando label para, mas no segundo elemento ele está focando no primeiro elemento. <html> <body> <div id = "first_div"> <label for = "name"> Nome </label> <input type = "text" id = "name"> </div> <div id = "second_div "> <label for =" name "> Name </label> <input type =" text "id =" name "> </div> </body> </html>

— LoveToCode

14

Em poucas palavras, o que ele faz é se referir à identrada, isso é tudo:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">

— Uwe Keim
fonte

6

Adicionar um for é importante, mesmo que eles sejam adjacentes. Lembro-me de ouvir que alguns leitores de tela para deficientes visuais têm problemas em contrário. Portanto, se você deseja ser amigável com aqueles que talvez estejam usando navegadores / leitores de tela alternativos, use este método.

— precisa saber é

3

O atributo for da <label>tag deve ser igual ao atributo id do elemento relacionado para uni-los.

— Rahul Tripathi
fonte

7

Sim, mas o que você quer dizer com "uni-los"? Eles já são vizinhos na estrutura HTML. Isto é o que eu não entendo.

— jeff

11

PARA Especifica que forma elemento de um rótulo é obrigado a

— Rahul Tripathi

2

@CengizFrostclaw jsfiddle.net/DmSGh --- tente clicar nos dois textos "Entrada aqui" e veja o que acontece.

— JJJ 25/08

11

@CengizFrostclaw: - Uma etiqueta pode ser ligado a um elemento ou usando o atributo "for"

— Rahul Tripathi

11

Existem alguns recursos interessantes, por exemplo, quando você está usando botões de opção. Clicar no rótulo alternará o botão de opção. Esse é um recurso interessante quando você tenta usar botões de opção com uma interface do usuário personalizada.

— 25413 Alex

0

O atributo for mostra que esse rótulo significa campo de entrada relacionado, caixa de seleção ou botão de opção ou qualquer outro campo de entrada de dados associado a ele. por exemplo

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>

— Pax
fonte

0

Ele rotula qualquer entrada que seja o parâmetro para o foratributo.

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>

Expandir snippet

— pythag0ras_
fonte