Passo 1 de 5
Reconhecer campos que pertencem ao mesmo grupo
Decida quais campos devem ficar juntos pelo contexto das informações solicitadas, não pela quantidade ou pelo tipo de campo.
Trilha de aprendizado · Nível 6 · Tutorial 5
Ao concluir, você poderá reunir campos relacionados em grupos com identificação semântica, preservando o rótulo individual de cada controle.
Reconhecer campos que pertencem ao mesmo grupo
Decida quais campos devem ficar juntos pelo contexto das informações solicitadas, não pela quantidade ou pelo tipo de campo. 1 min
Montar o grupo com fieldset e legend
Estruture um grupo de campos com fieldset e coloque legend na posição correta, mantendo os controles e seus rótulos dentro do grupo. 2 min
Dar contexto sem substituir os rótulos
Escreva legendas curtas e específicas que deem contexto ao grupo sem substituir os rótulos de cada campo. 2 min
Distinguir significado de aparência
Diferencie a aparência de um grupo da associação semântica que oferece contexto às tecnologias assistivas. 2 min
Aplicar e revisar o agrupamento completo
Organize um formulário em dois grupos semânticos e confira se as legendas complementam os rótulos dos campos. 3 min
Passo 1 de 5
Decida quais campos devem ficar juntos pelo contexto das informações solicitadas, não pela quantidade ou pelo tipo de campo.
Antes de pensar no HTML, observe as informações solicitadas. Campos que compartilham um contexto podem formar um grupo, quando isso ajuda a entender a organização do formulário.
Exemplo
Um conjunto permite entrar em contato com a pessoa; o outro informa onde entregar a compra.
Relacione cada conjunto de campos ao contexto que compartilham no cadastro de uma loja.
Toque em um item e depois no par correspondente.
Nome de usuário e rua podem usar campos de texto com aparência igual, mas pertencem a contextos diferentes. Já e-mail e telefone usam tipos de input diferentes e compartilham o contexto de contato.
Dica
Não há quantidade fixa de campos por grupo. Evite dividir um mesmo assunto em vários grupos sem necessidade: cada divisão deve ajudar a compreender o formulário.
Um formulário que pede apenas rua, cidade e CEP precisa de três grupos separados: um para cada campo.
Passo 2 de 5
Estruture um grupo de campos com fieldset e coloque legend na posição correta, mantendo os controles e seus rótulos dentro do grupo.
fieldset agrupa semanticamente controles relacionados: expressa no HTML que eles formam um conjunto. Coloque os campos e seus rótulos dentro dele.
legend identifica esse grupo. Ela deve ser o primeiro elemento filho direto de fieldset: vem logo após a abertura, sem ficar dentro de outro elemento.
<fieldset>
<legend>Contato</legend>
<label for="email">E-mail</label>
<input type="email" id="email" name="email">
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" name="telefone">
</fieldset>Dica
Neste padrão, cada fieldset recebe uma única legend. O fechamento de fieldset vem depois de todos os campos e rótulos que pertencem ao grupo.
Rua e CEP já foram escolhidos para formar o grupo Endereço de entrega.
Seu desafio será acrescentar fieldset e legend ao formulário abaixo, preservando os campos, os rótulos, os atributos e a ordem existente. O botão Salvar deve continuar depois do grupo, dentro do formulário.
<form action="/cadastro" method="post">
<label for="rua">Rua</label>
<input type="text" id="rua" name="rua">
<label for="cep">CEP</label>
<input type="text" id="cep" name="cep">
<button type="submit">Salvar</button>
</form>Ordene os blocos para formar o grupo “Endereço de entrega”. Mantenha Rua e CEP com seus rótulos dentro do grupo e o botão Salvar depois dele, ainda dentro de form.
Passo 3 de 5
Escreva legendas curtas e específicas que deem contexto ao grupo sem substituir os rótulos de cada campo.
A legend identifica o conjunto: “Endereço de entrega”. Cada label identifica uma informação específica: “Rua”, “Número” ou “CEP”.
A legenda acrescenta contexto, mas não substitui os rótulos nem suas associações aos controles.
Exemplo
Para os campos do endereço de entrega de uma compra:
Se a legend for “Rua, Número e CEP”, podemos remover os labels desses campos, pois seus nomes já aparecem na legenda.
Nos dois grupos abaixo, os rótulos são “Rua” e “CEP”. As legendas esclarecem a finalidade de cada endereço. Cada label continua associado ao seu próprio controle.
<fieldset>
<legend>Endereço de entrega</legend>
<label for="rua-entrega">Rua</label>
<input type="text" id="rua-entrega" name="rua_entrega">
<label for="cep-entrega">CEP</label>
<input type="text" id="cep-entrega" name="cep_entrega">
</fieldset>
<fieldset>
<legend>Endereço de cobrança</legend>
<label for="rua-cobranca">Rua</label>
<input type="text" id="rua-cobranca" name="rua_cobranca">
<label for="cep-cobranca">CEP</label>
<input type="text" id="cep-cobranca" name="cep_cobranca">
</fieldset>Um formulário de reserva tem um fieldset com a legend “Informações” e os campos “Nome” e “E-mail” da pessoa responsável pela reserva.
Proponha uma legenda mais informativa e explique por que os labels devem ser mantidos associados aos campos. Não é necessário escrever HTML.
Passo 4 de 5
Diferencie a aparência de um grupo da associação semântica que oferece contexto às tecnologias assistivas.
Uma borda, campos próximos ou um texto destacado podem sugerir um grupo visualmente. Mas não criam, por si só, a associação semântica fornecida por fieldset e legend.
O navegador pode exibir uma borda padrão no fieldset, mas essa aparência não é sua finalidade. Mesmo sem borda visível, a estrutura com fieldset e legend continua identificando o grupo.
Imagine duas versões de um formulário com a mesma aparência: borda e título “Contato”. Compare a marcação dos trechos abaixo.
<div>
<p>Contato</p>
<label for="email-a">E-mail</label>
<input type="email" id="email-a" name="email">
<label for="telefone-a">Telefone</label>
<input type="tel" id="telefone-a" name="telefone">
</div><fieldset>
<legend>Contato</legend>
<label for="email-b">E-mail</label>
<input type="email" id="email-b" name="email">
<label for="telefone-b">Telefone</label>
<input type="tel" id="telefone-b" name="telefone">
</fieldset>Qual trecho identifica semanticamente o grupo como “Contato”?
No trecho B, “Contato” fica disponível como contexto compartilhado para tecnologias assistivas. Um leitor de tela pode usar essa informação ao apresentar os campos, ajudando o usuário a interpretar o conjunto.
Dica
A forma e a frequência de anúncio da legend podem variar conforme a combinação de navegador, leitor de tela e modo de navegação. A marcação fornece o contexto, mas não determina uma sequência fixa de fala.
Se um leitor de tela não repetir a legend antes de cada campo, isso, por si só, comprova um erro no HTML.
Passo 5 de 5
Organize um formulário em dois grupos semânticos e confira se as legendas complementam os rótulos dos campos.
Uma loja solicita meios de contato para avisar o cliente e um endereço para entregar o pedido. O trecho abaixo já tem rótulos associados aos controles, mas os campos desses dois contextos estão misturados.
<form>
<label for="email">E-mail</label>
<input type="email" id="email" name="email">
<label for="rua">Rua</label>
<input type="text" id="rua" name="rua">
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" name="telefone">
<label for="numero">Número</label>
<input type="text" id="numero" name="numero">
</form>Reorganize o trecho em dois grupos dentro de form, usando fieldset e legend. Escolha legendas curtas e específicas e preserve todos os labels e atributos existentes. Entregue o HTML adaptado e, abaixo dele, uma frase explicando o critério da divisão.
Resumo
Antes de encerrar, revise seu HTML com estes critérios e ajuste o que faltar.
Parabéns! Você concluiu: Agrupar campos relacionados com fieldset e legend
Tutorial concluído! Você praticou como criar grupos com contexto compartilhado, identificá-los com legend e manter o rótulo de cada controle. O resultado comunica a organização do formulário sem depender apenas da aparência.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
