As tags < label >, < legend > e < fieldset >: Nomeando e agrupando campos de um Formulário

A esta altura do campeonato em nosso Curso de HTML, já aprendemos praticamente todos os tipos de campos que compões a grande maioria dos formulários existentes para você usar em seus sites.

Vamos aprender então, neste tutorial, como agrupar, nomear e organizar melhor os campos de um form.

• Estude offline: Apostila HTML + CSS

O campo <label>: Como criar rótulos e etiquetas para os formulários

Sempre que formos usar algum campo de um formulário, por mais óbvio que ela possa ser, é necessário deixar bem claro para o usuário e leitor de seu site o propósito daquele campo.

Ou seja, devemos fazer um processo de rotulação, colocar etiquetas, algum tipo de marcados nos campos, que explique para que serve cada um daqueles elementos do form.

Fizemos isso, algumas vezes, como no uso das caixas de texto, apenas escrevendo "Login" ou "Insira seu e-mail aqui" com valor inicial de uma caixa de texto.

Ok, isso é bem comum e até dá, tranquilamente, para o leitor a informação necessária, mas não é a maneira mais indicada e correta de se trabalhar com formulários em HTML.

Sintaxe da tag <label>: O atributo for

Assim, para nomearmos de maneira mais correta os campos de um formulário, devemos usar a tag <label> (rótulo ou etiqueta, em inglês), cuja sintaxe é:

<label for="Nome_do_campo">Texto que visível</label>

Ou seja, devemos colocar no atributo for o nome do campo de formulário na qual aquele label se refere.

Por exemplo, vamos criar uma caixa de texto chamada "email" e uma caixa de password chamada "senha", o uso correto do label seria como mostra o seguinte código HTML:

<label for="email">E-mail: </label>
<input type="text" name="email"> <br />
<label for="senha">Senha:  </label>
<input type="password" name="senha">

Cujo resultado será:
E-mail:
Senha:

Note que o valor contido no atributo for da tag <label> deve igual ao nome do formulário na qual aquele label se refere. Isto é importante.
E isso aparentemente é igual a simplesmente colocar um texto qualquer. Mas só aparentemente, pois o uso de label, além de deixar seu código e formulário HTML mais organizado, fornece algumas funcionalidades, principalmente se o leitor não puder ver os formulários.

As tags <fieldset> e <legend> - Agrupando e Organizando campos de um Formulário

Certamente você já deve ter se esbarrado com longos e gigantescos formulários, que perguntam até a cor de seus olhos.

Para se cadastrar em site para fazer uma compra online devemos fornecer uma série de informações, dos mais variados tipos.
Assim, nesses casos, é interessante agrupar as informações em blocos distintos.

Por exemplo, um grupo de campos que pergunta as informações do cartão de crédito, informações pessoais (como CPF, RG, Órgão Emissor etc), dados do endereço (Rua, Bairro, Cidade, Cep, Estado etc), etc etc.

Assim, vai surgindo a necessidade de uma maior organização em formulários.
Mas existem duas tags que servem especialmente para agrupar e organizar determinados campos de um formulário, que são as tags <legend> (pode ser traduzido como uma legenda, no sentido de descrição) e a <fieldset> (conjunto de campos).

A sintaxe da tag fieldset é:

<fieldset>
 Conjunto de campos
 que queremos agrupar
 aqui
 <input...>
</fieldset>

Como a tradução do nome da tag pode sugerir, ela serve para agruparmos um conjunto de campos de um formulário, que estão interligados.
Por exemplo, vamos usar os os campos de texto e de senha, que citamos no tópico passado deste mesmo tutorial de nossa apostila.

Nosso código HTML vai ficar:

<fieldset>
   <label for="email">E-mail: </label>
   <input type="text" name="email"> <br />
   <label for="senha">Senha:  </label>
   <input type="password" name="senha">
</fieldset>

E o resultado é:

E-mail:
Senha:

Ou seja, agrupamos os campos que se referem ao login, pedindo e-mail e senha.
Pois bem, se este campo se refere ao login, vamos deixar isso bem claro e colocar uma legenda.
Para tal, vamos usar a tag legend, cuja simples sintaxe é:

<legend>Legenda bem descritiva</legend>

Onde esta tag vai dentro da fieldset, geralmente ambas são usadas em conjunto, para dar uma descrição para aqueles campos do formulário.
Por exemplo, vamos colocar uma legenda de "Login", para informar ao leitor que aqueles campos são os de login e não de um cadastro ou busca.

O código ficaria:

<fieldset>
  <legend>Login</legend>
  <label for="email">E-mail: </label>
  <input type="text" name="email"> <br />
  <label for="senha">Senha:  </label>
  <input type="password" name="senha">
</fieldset>

E o belo resultado é:

Bem mais organizado e interessante, não?
No próximo artigo de nosso curso, iremos criar um tutorial mostrando como criar passo-a-passo um formulário bem completo, usando todos os campos que estudamos e iremos comentar cada trecho do código.

Obviamente, usaremos bastante as tags <label>, <fieldset> e <legend>.