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?

html forms input label jeff
fonte

Respostas:

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