fieldset, legend e formulários longos
Um formulário com muitos campos vira uma parede de caixas de texto sem nenhum agrupamento. fieldset e legend resolvem isso tanto visualmente quanto para quem usa leitor de tela.
Estudar esta lição interativa →Formulários de verdade, como um cadastro completo ou uma pesquisa, raramente têm dois ou três campos apenas. Sem nenhum agrupamento visual, uma dezena de campos vira uma parede única, difícil de escanear com os olhos e ainda mais difícil de navegar ouvindo um leitor de tela campo por campo, sem nenhuma pista de que "nome" e "e-mail" pertencem a um grupo, e "forma de contato" pertence a outro.
Pense num formulário de papel de um órgão público, dividido em blocos com um título em destaque para cada um: "Dados pessoais", "Endereço", "Informações de contato". Cada bloco isola um assunto, e você sabe exatamente onde procurar antes mesmo de ler campo por campo. <fieldset> é esse bloco, e <legend> é o título dele.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Dois fieldsets: um para dados pessoais, outro para um grupo de radio buttons.
Repare no segundo grupo do exemplo, o de radio buttons: sem o fieldset/legend ao redor, um leitor de tela anunciaria cada opção ("E-mail", "Telefone", "WhatsApp") sem contexto nenhum sobre o que está sendo escolhido. Com o legend "Forma de contato preferida", cada opção é anunciada junto desse contexto, ficando claro do que se trata. É exatamente por isso que fieldset é considerado quase obrigatório sempre que existe um grupo de radio buttons ou checkboxes relacionados.
Um <legend> precisa ser o primeiro filho dentro do <fieldset>, senão ele é inválido e não funciona como o título do grupo. E nem todo campo sozinho precisa de um fieldset próprio: reserve-o para grupos de dois ou mais campos relacionados (ou grupos de radio/checkbox), não como uma caixa decorativa ao redor de um único input.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione fieldset e legend.