A tag label é útil no trabalho com formulários. Ela especifica qual o "rótulo" do input (a que se refere o input), e ajuda na experiência do usuário durante a utilização e preenchimento do formulário.
Explorando o comportamento da tag label, temos duas formas de trabalhar com ela:
- Forma 1: label antes do input;
- Forma 2: input dentro da label;
Vamos ver como funcionam ambas as formas, começando pela forma 1:
<form action="#" method="post">
<label>Nome completo: </label>
<input type="text" name="nome_completo">
</form>
Neste caso, a utilização da label é quase ineficaz pois ela não ajuda o usuário no preenchimento do formulário. Digo quase ineficaz porque os robôs de indexação lerão seu HTML e saberão que aquele texto refere-se ao rótulo de um input, porém não identificaria qual input seria, pois não há nada que relaciona tecnicamente o input com o label. O mesmo resultado estético (visual em tela) você teria se não usasse a label.
Para sanar esse problema com a indexação da página pelos motores de busca e melhorar a experiência do usuário, basta utilizarmos o atributo for relacionando com um elemento input através de seu ID:
<form action="#" method="post">
<label for="nome_completo">Nome completo: </label>
<input type="text" name="nome_completo" id="nome_completo">
</form>
Desta forma, além de deixar claro para os robôs indexadores a correlação entre label e input, você também melhora a experiência do usuário: ao clicar no texto da label, automaticamente o foco é transferido para o input relacionado, ativando para preenchimento o cursor no input. Isto é muito útil principalmente quando estamos usando input radio ou checkbox, pois o usuário pode marcar o input apenas clicando na label, não sendo necessário posicionar o ponteiro do mouse exatamente sobre o input para haver o preenchimento do formulário.
É muito interessante essa funcionalidade com o atributo for, porém acredito que a segunda forma de trabalhar com as labels seja ainda melhor:
<form action="#" method="post">
<label>Nome completo: <input type="text" name="nome_completo"></label>
</form>
Você não precisa mais do for e do ID para estabelecer uma correlação entre label e input quando você insere o input dentro da própria label; e o funcionamento quanto à utilização do formulário pelo usuário ainda é o mesmo (o cursor vai automaticamente para o input ao clicar no rótulo da label).
Dica extra: Você pode melhorar ainda mais seu layout com a utilização de placeholder no input, não havendo mais a necessidade de um rótulo na label. Veja:
<form action="#" method="post">
<label><input type="text" name="nome_completo" placeholder="Nome completo"></label>
</form>
Desta forma o rótulo do seu input fica dentro dele, aguardando o usuário efetuar o preenchimento. Essa prática é útil pois te da mais liberdade para trabalhar seu layout e compor o CSS para trabalhar com as labels e inputs.