Organizando formulários: fieldset, legend e label

Aprenda a agrupar campos relacionados visualmente, adicionar títulos aos grupos e conectar rótulos aos campos corretamente.

Até agora, você aprendeu a criar diversos tipos de campos e botões. Mas um formulário não é apenas uma coleção de campos soltos. Para ser eficiente, acessível e fácil de usar, ele precisa ser organizado. As tags <fieldset>, <legend> e <label> são essenciais para dar estrutura e significado aos seus formulários.

A tag <label>: o rótulo do campo

Você já viu a tag <label> em lições anteriores, e ela é tão importante que merece ser revisitada. A tag <label> representa o rótulo (ou descrição) de um item em uma interface de usuário.

Por que <label> é fundamental?

  • Acessibilidade: Leitores de tela leem o texto do <label> para descrever o campo correspondente. Isso é crucial para usuários com deficiência visual.
  • Usabilidade: Ao clicar no texto do <label>, o campo associado é focado (ou ativado, no caso de checkboxes/radios). Isso aumenta a área clicável e facilita a interação, especialmente em dispositivos móveis.

Como conectar <label> a um campo:

  1. Usando for e id (método preferido):

    • O atributo for do <label> deve ter o mesmo valor do atributo id do campo (<input>, <textarea>, <select>).
    <label for="nome_usuario">Nome:</label>
<input type="text" id="nome_usuario" name="nome">

  2. Aninhando o campo dentro do <label>:

    • Você pode colocar o campo diretamente dentro da tag <label>. Nesse caso, o atributo for não é estritamente necessário, mas o id no campo ainda é uma boa prática.
    <label>
  E-mail:
  <input type="email" id="email_usuario" name="email">
</label>

A tag <fieldset>: agrupando campos relacionados

A tag <fieldset> é usada para agrupar vários controles (campos) relacionados dentro de um formulário. Ela cria uma caixa visual ao redor dos campos agrupados, ajudando a organizar o formulário em seções lógicas.

Por que <fieldset> é importante?

  • Semântica: Sinaliza que os campos dentro dela estão relacionados tematicamente.
  • Acessibilidade: Leitores de tela podem anunciar o grupo de campos, fornecendo contexto adicional ao usuário.
  • Organização Visual: Ajuda a quebrar formulários longos em partes mais gerenciáveis, melhorando a usabilidade.

Exemplo:

<form>
  <fieldset>
    <!-- Campos relacionados a informações pessoais -->
  </fieldset>

  <fieldset>
    <!-- Campos relacionados a informações de contato -->
  </fieldset>
</form>

A tag <legend>: o título do grupo de campos

A tag <legend> fornece uma legenda (título) para o conteúdo de um <fieldset>. Ela deve ser o primeiro elemento filho do <fieldset>.

Por que <legend> é importante?

  • Semântica: Descreve o propósito do grupo de campos.
  • Acessibilidade: Leitores de tela anunciam a <legend> quando o usuário entra no <fieldset>, informando o contexto dos campos que virão a seguir.
  • Organização Visual: O texto da <legend> aparece como um título na borda do <fieldset>, tornando a interface mais clara.

Exemplo completo com <fieldset> e <legend>:

<form>
  <fieldset>
    <legend>Informações Pessoais</legend>

    <label for="nome">Nome:</label><br>
    <input type="text" id="nome" name="nome_completo" required><br><br>

    <label for="sobrenome">Sobrenome:</label><br>
    <input type="text" id="sobrenome" name="sobrenome_completo" required><br><br>

    <label for="nascimento">Data de Nascimento:</label><br>
    <input type="date" id="nascimento" name="data_nascimento">
  </fieldset>

  <br>

  <fieldset>
    <legend>Informações de Contato</legend>

    <label for="email">E-mail:</label><br>
    <input type="email" id="email" name="email_contato" required><br><br>

    <label for="telefone">Telefone:</label><br>
    <input type="tel" id="telefone" name="telefone_contato">
  </fieldset>

  <br>

  <button type="submit">Enviar Cadastro</button>
</form>

Resumindo

  • <label>:
    • Fornece um rótulo descritivo para um campo de formulário.
    • Essencial para acessibilidade e usabilidade.
    • Conecte-o ao campo usando for (no <label>) e id (no campo), ou aninhando o campo.
  • <fieldset>:
    • Agrupa campos de formulário relacionados tematicamente.
    • Cria uma caixa visual ao redor do grupo.
    • Melhora a semântica, acessibilidade e organização visual.
  • <legend>:
    • Fornece um título para o grupo de campos dentro de um <fieldset>.
    • Deve ser o primeiro filho do <fieldset>.
    • Aparece como um título na borda do <fieldset>.

Usar essas tags corretamente transforma um formulário simples em uma interface de usuário clara, organizada e acessível para todos.