Formulário utilizando “Label” e o atributo “For”

out 13

Formulário utilizando “Label” e o atributo “For”

Meta Tags: Webstandards, xHTML • por Gustavo Ribeiro

Quem nunca ficou irado ao ter que preencher um formulário e só conseguir clicar em cima da bolinha – radio button – de cada opção para fazer sua escolha? Sim, isso realmente irrita. Para isso que existe o atributo “for” para os nossos form label. Ok, o que seria esse tal de “for”.

Quando criamos um formulário temos que ficar atentos a, no mínimo, três tags fundamentais para a marcação correta do form, são elas: <form>, <label> e a nossa famosa <input>.

<form> – indicará o início e fim do nosso formulário;
<label> – irá conter todo o respectivo texto de cada campo do formulário;
<input> – nosso formulário em si (campo texto, radio buttons etc).

<form action="/">
    <p>
        <label for="txtNome">Nome</label>
        <input type="text" id="txtNome" />
    </p>
    <p>
        <label for="txtEmail">Nome</label>
        <input type="text" id="txtEmail" />
    </p>
    <p>
        <input type="submit" value="Enviar" />
    </p>
</form>

Reparem que, para cada <label>, temos um for e, para cada <input>, temos uma id, ambas com o mesmo valor. Cada “id” representa uma identificação para cada campo do formulário enquanto cada “for” representa uma ligação do label com o campo.

Pronto! Já temos todas as ligações feitas, agora é só clicar no texto para que, automaticamente, o campo texto seja selecionado. O mesmo acontece com os demais objetos de um formulário (radio button, checkboxes etc).

Compartilhe este post: