A tag <fieldset> no HTML ajuda a agrupar campos relacionados ao simplificar o preenchimento e tornar a navegação mais fluida. É uma ferramenta bastante útil para deixar seus formulários mais organizados e fáceis de usar.
Neste artigo, exploraremos como aproveitar essa tag para melhorar a usabilidade e a acessibilidade dos formulários. Além disso, vamos explicar quando é melhor usá-la ou evitá-la, com exemplos práticos para aplicar no seu site.
Principais atributos da tag <fieldset>
A tag <fieldset> é usada para agrupar elementos dentro de um formulário e, assim, proporcionar uma estrutura mais organizada e acessível. Ela conta com atributos importantes para personalizar seu comportamento.
disabled: como desativar todos os campos dentro de um <fieldset>
O atributo disabled permite desabilitar todos os campos dentro de um <fieldset>, como caixas de texto e botões. Isso é útil para impedir que a pessoa usuária interaja com certos campos, sem precisar desativar cada um individualmente.
Ao adicionar disabled ao <fieldset>, todos os elementos internos ficam inativos, e os dados não serão submetidos durante o envio do formulário.
Aqui está um exemplo:
<fieldset disabled> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome"> </fieldset>
form: associar um <fieldset> a um formulário específico
O atributo form é utilizado para associar um <fieldset> a um formulário específico, enquanto permite que ele seja agrupado fora da tag <form>. É bem útil para organizar o layout de maneira mais flexível, sem precisar aninhar todos os elementos dentro da tag <form>.
O atributo form agrega o <fieldset> a um formulário externo.
Exemplo:
<form id="meuFormulario"> <fieldset form="meuFormulario"> <label for="email">Email:</label> <input type="email" id="email" name="email"> </fieldset> </form>
name: nomear um <fieldset> para identificação em scripts e CSS
O atributo name pode ser utilizado para atribuir um nome ao <fieldset> e facilitar sua identificação em scripts e folhas de estilo (CSS).
Esse nome é vantajoso em manipulações dinâmicas e para aplicar estilos específicos a determinados grupos de campos.
Veja como funciona:
<fieldset name="informacoesPessoais"> <legend>Informações Pessoais</legend> <label for="idade">Idade:</label> <input type="number" id="idade" name="idade"> </fieldset>
Neste exemplo, o <fieldset> foi nomeado como informacoesPessoais, o que facilita a referência em scripts e CSS.
Exemplos práticos de uso da tag <fieldset>
Agora que conhecemos os atributos essenciais, explore exemplos práticos para entender melhor como usar a tag <fieldset> em diferentes cenários.
Formulário com <fieldset> para agrupar dados pessoais
A tag <fieldset> pode agrupar dados relacionados, como em um formulário que solicita informações pessoais, para tornar o formulário mais organizado e facilitar a leitura e navegação.
O exemplo mostra como agrupar campos de dados pessoais, como nome e idade:
<form> <fieldset> <legend>Dados Pessoais</legend> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome"> <label for="idade">Idade:</label> <input type="number" id="idade" name="idade"> </fieldset> </form>
Criar um formulário acessível para múltiplas seções
Ao usar múltiplos <fieldset> em um formulário, você pode dividir o conteúdo em seções lógicas, o que melhora a usabilidade e a acessibilidade.
Cada <fieldset> pode agrupar um conjunto de campos relacionados, o que torna o formulário mais organizado e compreensível a quem acessa, inclusive aqueles que utilizam leitores de tela.
Confira:
<form> <fieldset> <legend>Informações de Contato</legend> <label for="email">Email:</label> <input type="email" id="email" name="email"> </fieldset> <fieldset> <legend>Preferências</legend> <label for="newsletter">Receber Newsletter:</label> <input type="checkbox" id="newsletter" name="newsletter"> </fieldset> </form>
Usar <fieldset> para criar uma lista editável de opções
Você pode utilizar <fieldset> para criar uma lista de opções interativas, em que a pessoa usuária pode editar, adicionar ou remover itens.
Essa estrutura é ideal para criar interfaces como listas de interesses ou preferências, já que oferece uma experiência mais dinâmica e organizada.
<form> <fieldset> <legend>Lista de Interesses</legend> <label for="interesse1">Interesse 1:</label> <input type="text" id="interesse1" name="interesse1"> <label for="interesse2">Interesse 2:</label> <input type="text" id="interesse2" name="interesse2"> </fieldset> </form>
Esse exemplo mostra como agrupar os campos de uma lista editável em um único <fieldset>.
Como estilizar <fieldset> com CSS
A estilização de um <fieldset> com CSS permite personalizar o visual para que ele fique mais atrativo e funcional. Confira algumas opções de personalização a seguir.
Alterar bordas, cores, espaçamentos e fontes
Com CSS, você pode ajustar diversos aspectos de um <fieldset>, como bordas, cores de fundo e fontes.
Para alterar a borda, a cor do fundo e o espaçamento interno, use as propriedades border, background-color e padding, respectivamente. Já para personalizar a fonte, use font-family.
Veja como personalizar essas propriedades:
<fieldset class="custom-fieldset">
<legend>Informações de Contato</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
<style>
.custom-fieldset {
border: 2px solid #4CAF50;
background-color: #f9f9f9;
padding: 20px;
font-family: Arial, sans-serif;
}
.custom-fieldset legend {
font-weight: bold;
color: #4CAF50;
}
</style>
Personalizar <legend>
A tag <legend> pode ser estilizada separadamente para destacar o título do grupo de campos. Com CSS, você pode mudar a cor, o tamanho da fonte, a posição e até o estilo da borda ao redor do texto.
Exemplo:
.custom-fieldset legend {
font-size: 1.2em;
color: #333;
padding: 5px;
background-color: #e0e0e0;
}
Criar um <fieldset> responsivo com CSS
Para garantir que seu <fieldset> se adapte a diferentes tamanhos de tela, use unidades relativas como em, % ou vw, e combine-as com media queries para um design responsivo.
Exemplo:
.custom-fieldset {
max-width: 100%;
width: auto;
}
@media (max-width: 600px) {
.custom-fieldset {
padding: 15px;
}
}
Como usar <fieldset> com Bootstrap?
O Bootstrap facilita a estilização do <fieldset> com classes prontas que podem ser aplicadas diretamente.
Ao utilizar o framework, você adiciona bordas, sombras e bordas arredondadas rapidamente para tornar o formulário mais moderno e visualmente atrativo.
Aqui está um exemplo de como estilizar um <fieldset> por meio do uso de classes do Bootstrap:
<form> <fieldset class="border border-primary rounded shadow p-3"> <legend class="w-auto px-2">Informações de Contato</legend> <label for="email">Email:</label> <input type="email" id="email" class="form-control" name="email"> </fieldset> </form>
Agora, confira a explicação:
- border: adiciona uma borda ao redor do <fieldset>;
- border-primary: define a cor da borda como azul (com base na cor primária do Bootstrap);
- rounded: aplica bordas arredondadas ao <fieldset>;
- shadow: adiciona uma sombra suave ao redor do <fieldset>;
- p-3: adiciona um espaçamento interno ao redor do conteúdo.
Essas classes tornam o processo de estilização simples e eficiente ao usar o Bootstrap.
O que é a tag <fieldset> no HTML?
A tag <fieldset> é usada no HTML para agrupar elementos de formulário dentro de uma estrutura visualmente organizada. É uma maneira de organizar dados relacionados em um formulário, para facilitar o entendimento e o preenchimento.
Com a adição da tag <legend>, que serve como um título para o grupo de campos, o uso de <fieldset> melhora a clareza e a navegação para a pessoa usuária.
O <fieldset> é útil sempre que você precisar agrupar campos de formulário que pertencem a uma mesma categoria ou contexto. Por exemplo, em um formulário de cadastro, você pode usar um <fieldset> para agrupar dados pessoais e outro para informações de endereço.
Ele deve ser utilizado em formulários longos ou complexos, onde o agrupamento de campos facilita a organização e a usabilidade.
Conheça os principais benefícios do uso dessa tag para acessibilidade e organização de formulários:
- Melhora a navegação: agrupar os campos ajuda a pessoa usuária a entender melhor as seções do formulário;
- Aumenta a acessibilidade: ferramentas de leitura de tela podem identificar facilmente os grupos de campos, o que proporciona fluidez na navegação;
- Organiza visualmente o formulário: o uso de bordas e legendas torna o formulário mais limpo e compreensível;
- Facilita o design responsivo: a tag <fieldset> facilita o ajuste do layout de formulários em diferentes tamanhos de tela.
Quando usar a tag <fieldset> no HTML?
A tag <fieldset> deve ser usada quando você precisa agrupar elementos de um formulário que compartilham um tema.
Por exemplo, quando você tem dados pessoais, como contato ou endereço, em um formulário, use a <fieldset> para separar visualmente essas seções. Com o formulário mais organizado, a pessoa usuária completa mais facilmente.
Além disso, o uso de <fieldset> melhora a acessibilidade ao favorecer a navegação por leitores de tela.
Quando não usar a tag <fieldset>?
A tag <fieldset> não deve ser usada para agrupar elementos que não pertencem à mesma categoria. Evite seu uso em formulários simples ou com poucos campos, onde o agrupamento não contribui para a visualização e experiência geral.
Também não é adequado usar <fieldset> em elementos que não são parte de um formulário, seja informação estática ou texto que não envolve campos de entrada.
Em casos de design minimalista ou agrupamento desnecessário, use outros métodos de organização.
Agora que você chegou até aqui, já sabe como a tag <fieldset> pode transformar a organização, usabilidade e acessibilidade de um formulário. Agora, aproveite os benefícios dessa ferramenta para melhorar os seus!
E que tal aprender mais sobre HTML semântico e conhecer a hospedagem de site da Locaweb? Até a próxima!