Tag HTML <fieldset>
A tag HTML <fieldset> agrupa visualmente campos relacionados em um formulário HTML definido com a tag <form>. Veja sintaxe e exemplos.
A tag <fieldset> agrupa controles logicamente relacionados dentro de um <form> HTML, permitindo dividir um formulário longo em seções claras. Por padrão, o navegador desenha uma caixa ao redor do conteúdo agrupado. Combinada com um <legend>, ela também é a forma correta de dar a um grupo de controles <input> um rótulo compartilhado e acessível.
Esta página aborda a sintaxe, o papel do <legend>, todos os atributos (name, disabled, form), como reestilizar ou remover a caixa, e por que o <fieldset> é importante para grupos acessíveis de radio buttons e checkboxes.
Sintaxe
A tag <fieldset> vem em pares. O conteúdo é escrito entre as tags de abertura (<fieldset>) e de fechamento (</fieldset>).
Exemplo da tag HTML <fieldset>:
Tag HTML <fieldset>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information:</legend>
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" />
</div>
<div>
<label for="date">Date of birth:</label>
<input type="date" id="date" />
</div>
<div>
<label for="birth-place">Place of birth:</label>
<input type="text" id="birth-place" />
</div>
</fieldset>
</form>
</body>
</html>Resultado
O elemento <legend>
O elemento <legend> fornece ao <fieldset> uma legenda. Duas regras são importantes:
- Ele deve ser o primeiro filho do
<fieldset>. Se aparecer em outro lugar, os navegadores o ignoram como legenda do grupo. - Ele é o nome acessível do grupo. As tecnologias assistivas anunciam o texto da legenda junto com cada controle dentro do grupo. Assim, quando um usuário de leitor de tela chega a um controle, ele ouve algo como "Informações Pessoais — Nome, campo de texto", o que indica a qual seção aquele campo pertence.
<fieldset>
<legend>Shipping address</legend>
<!-- the inputs for this section go here -->
</fieldset>Um <fieldset> sem <legend> ainda desenha uma caixa, mas o grupo não tem nome, portanto o benefício de acessibilidade é perdido. Adicione uma legenda sempre que o agrupamento tiver significado para o usuário.
O elemento <fieldset> para organizar formulários
A maioria dos formulários online é difícil de usar e desorganizada. Organizá-los em seções lógicas melhora significativamente a usabilidade. Usar o elemento <fieldset> com o elemento <legend> cria limites claros e torna seus formulários mais fáceis de navegar.
Acessibilidade: agrupando radio buttons e checkboxes
Um único <input> de texto é rotulado pelo seu próprio <label>. Mas um conjunto de radio buttons ou checkboxes precisa de dois níveis de rotulação: um para a pergunta completa e um para cada opção. <fieldset> + <legend> é a forma padrão e acessível de fazer isso — a legenda rotula a pergunta e cada <label> rotula uma opção.
<fieldset>
<legend>Choose a shipping method:</legend>
<div>
<input type="radio" id="standard" name="shipping" value="standard" />
<label for="standard">Standard (3–5 days)</label>
</div>
<div>
<input type="radio" id="express" name="shipping" value="express" />
<label for="express">Express (1–2 days)</label>
</div>
</fieldset>Aqui, um leitor de tela anuncia "Escolha um método de envio, Padrão, botão de rádio" — o usuário sempre sabe qual pergunta está respondendo. Sem o invólucro <fieldset>/<legend>, as opções são lidas como uma lista desconectada. Use este padrão para cada grupo de radio buttons e para qualquer conjunto de checkboxes relacionados.
Removendo ou reestilizando a caixa
A borda padrão é apenas um estilo — não é obrigatória. Uma pergunta muito comum é como removê-la. Defina border: none no <fieldset>:
fieldset {
border: none;
padding: 0;
margin: 0;
}Você também pode dar ao <legend> e à caixa qualquer estilo que desejar (fundo, borda personalizada, cantos arredondados). O agrupamento e sua semântica de acessibilidade permanecem intactos, independentemente de como você o estilize, então você pode abandonar a aparência padrão sem perder o benefício.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| disabled | disabled | Desabilita o grupo inteiro. Todos os controles de formulário dentro do <fieldset> ficam não interativos e não são enviados com o formulário. |
| form | form_id | Associa o fieldset a um ou mais formulários pelo id deles, para que ele possa ficar fora do <form> ao qual pertence. Separe múltiplos ids com espaços. |
| name | text | O nome do grupo. Não é enviado com o formulário; é usado principalmente para referenciar o grupo a partir do JavaScript. |
O atributo disabled é útil quando uma seção inteira de um formulário deve ser desativada de uma vez — por exemplo, ocultando campos de pagamento até que uma checkbox seja marcada:
<fieldset disabled>
<legend>Payment details</legend>
<label for="card">Card number:</label>
<input type="text" id="card" />
</fieldset>O atributo form permite que um <fieldset> fique fora do elemento <form> e ainda assim pertença a ele:
<form id="signup"></form>
<fieldset form="signup">
<legend>Account</legend>
<label for="user">Username:</label>
<input type="text" id="user" />
</fieldset>A tag <fieldset> suporta os Atributos Globais e os Atributos de Evento.