<fieldset>: Elemento FIELDSET
Última atualização: 2026-10-13
<fieldset>Elemento FIELDSET
Agrupa controles de formulário relacionados e mostra uma legend opcional, melhorando legibilidade e acessibilidade.
| Categoria | Formulários |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </fieldset> tag |
| Status | Padrão |
📝 Sintaxe
<fieldset>
<legend>Título do grupo</legend>
...controles...
</fieldset>⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
name | Group name submitted with the form. | |
disabled | Disables all controls inside. | |
form | The id of the associated form. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <fieldset> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： fieldset tem borda padrão (removível via CSS); desabilitá-lo desabilita todos os controles internos.
❓ Perguntas Frequentes
QPara que serve fieldset?
A
<fieldset> agrupa controles de formulário relacionados (por exemplo, «Endereço de entrega» num grupo, «Forma de pagamento» noutro), com borda por padrão, e combina com <legend> para o título do grupo. O leitor de tela anuncia o nome do grupo antes dos controles, melhorando muito a compreensão de formulários longos.QA borda do fieldset pode ser removida?
ASim:
fieldset { border: none; padding: 0; margin: 0; }. Remover o visual não afeta a semântica — o valor de agrupamento e legend para acessibilidade permanece. É o exemplo clássico de semântica e estilo desacoplados.QPara que serve o atributo disabled de fieldset?
ACom
disabled em <fieldset>, todos os controles do grupo são desativados de uma vez (incluindo descendentes) — perfeito para cenários de «formulário inteiro só de leitura», como a etapa de confirmação do pedido. Bem mais enxuto que adicionar disabled controle a controle.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
