Tornar o texto de um radio/checkbox clicavel

A tag <label> serve para criar um relacionamento entre o texto (rótulo descritivo) e o campo. Essa tag é muito usada para tornar o site acessivel a leitores de tela(para deficientes visuais).

Mas ela também faz com que ao ser clicado no texto o campo receba o foco(o cursor), com isso podemos tornar o texto de um checkbox clicavel.

Para usa-lo, é só adicionar um for=”nomedocampo” no label, e o nomedocampo deve ser definido no id do input, lembrando que o id deve ser unico em todo o formulario.

Aqui um codigo de exemplo:

  <form method="post" action="?">
<label for="username">Nome:</label> <input type='text' id='username' />

<label for="password">Senha: </label> <input type='password' id='password' />

<label for="chekbox">Chekbox: </label><input type="checkbox" value="login" id='chekbox' />
<input type='radio'  id='radio' name='nome'"> <label for='radio'>texto</label> <input type="submit" value="login" />

</form>

Exemplo, clique nos textos:

Legal né ?, e pode ser usado em qualquer formulário, e com certeza os usuarios iram agradecer já que fica bem mais facil de se clicar, só é preciso que os usuarios saibam dessa funcionalidade