{"id":37783,"date":"2025-07-16T12:36:19","date_gmt":"2025-07-16T15:36:19","guid":{"rendered":"https:\/\/www.locaweb.com.br\/ajuda\/?post_type=ht_kb&p=37783"},"modified":"2025-07-16T12:36:19","modified_gmt":"2025-07-16T15:36:19","slug":"fieldset-html","status":"publish","type":"ht_kb","link":"https:\/\/www.locaweb.com.br\/ajuda\/wiki\/fieldset-html\/","title":{"rendered":"Como usar a tag fieldset corretamente"},"content":{"rendered":"

A tag <fieldset> no HTML<\/strong> ajuda a agrupar campos relacionados ao simplificar o preenchimento e tornar a navega\u00e7\u00e3o mais fluida. \u00c9 uma ferramenta bastante \u00fatil para deixar seus formul\u00e1rios mais organizados e f\u00e1ceis de usar.<\/p>\n

Neste artigo, exploraremos como aproveitar essa tag para melhorar a usabilidade e a acessibilidade dos formul\u00e1rios. Al\u00e9m disso, vamos explicar quando \u00e9 melhor us\u00e1-la ou evit\u00e1-la, com exemplos pr\u00e1ticos para aplicar no seu site.<\/p>\n

Principais atributos da tag <fieldset><\/h2>\n

A tag <fieldset> \u00e9 usada para agrupar elementos dentro de um formul\u00e1rio e, assim, proporcionar uma estrutura mais organizada e acess\u00edvel.<\/strong> Ela conta com atributos importantes para personalizar seu comportamento.<\/p>\n

disabled: como desativar todos os campos dentro de um <fieldset><\/h3>\n

O atributo disabled permite desabilitar todos os campos dentro de um <fieldset>, como caixas de texto e bot\u00f5es. Isso \u00e9 \u00fatil para impedir que a pessoa usu\u00e1ria interaja com certos campos<\/strong>, sem precisar desativar cada um individualmente.<\/p>\n

Ao adicionar disabled ao <fieldset>, todos os elementos internos ficam inativos, e os dados n\u00e3o ser\u00e3o submetidos durante o envio do formul\u00e1rio.<\/p>\n

Aqui est\u00e1 um exemplo:<\/p>\n

<fieldset disabled><\/em>\r\n<label for=\"nome\">Nome:<\/label><\/em>\r\n<input type=\"text\" id=\"nome\" name=\"nome\"><\/em>\r\n<\/fieldset><\/em><\/pre>\n
form: associar um <fieldset> a um formul\u00e1rio espec\u00edfico<\/h3>\n
O atributo form \u00e9 utilizado para associar um <fieldset> a um formul\u00e1rio espec\u00edfico, enquanto permite que ele seja agrupado fora da tag <form>. \u00c9 bem \u00fatil para organizar o layout de maneira mais flex\u00edvel,<\/strong> sem precisar aninhar todos os elementos dentro da tag <form>.<\/p>\n
O atributo form agrega o <fieldset> a um formul\u00e1rio externo.<\/p>\n
Exemplo:<\/p>\n
<form id=\"meuFormulario\"><\/em>\r\n<fieldset form=\"meuFormulario\"><\/em>\r\n<label for=\"email\">Email:<\/label><\/em>\r\n<input type=\"email\" id=\"email\" name=\"email\"><\/em>\r\n<\/fieldset><\/em>\r\n<\/form><\/em><\/pre>\n
name: nomear um <fieldset> para identifica\u00e7\u00e3o em scripts e CSS
\n<\/em><\/h3>\n
O atributo name pode ser utilizado para atribuir um nome ao <fieldset> e facilitar sua identifica\u00e7\u00e3o em scripts e folhas de estilo<\/strong> (CSS).<\/p>\n
Esse nome \u00e9 vantajoso em manipula\u00e7\u00f5es din\u00e2micas e para aplicar estilos espec\u00edficos a determinados grupos de campos.<\/p>\n
Veja como funciona:<\/p>\n
<fieldset name=\"informacoesPessoais\"><\/em>\r\n<legend>Informa\u00e7\u00f5es Pessoais<\/legend><\/em>\r\n<label for=\"idade\">Idade:<\/label><\/em>\r\n<input type=\"number\" id=\"idade\" name=\"idade\"><\/em>\r\n<\/fieldset><\/em><\/pre>\n
Neste exemplo, o <fieldset> foi nomeado como informacoesPessoais<\/em>, o que facilita a refer\u00eancia em scripts e CSS.<\/p>\n
Exemplos pr\u00e1ticos de uso da tag <fieldset><\/h2>\n
Agora que conhecemos os atributos essenciais, explore exemplos pr\u00e1ticos para entender melhor como usar a tag <fieldset> em diferentes cen\u00e1rios.<\/p>\n
Formul\u00e1rio com <fieldset> para agrupar dados pessoais<\/h3>\n
A tag <fieldset> pode agrupar dados relacionados, como em um formul\u00e1rio que solicita informa\u00e7\u00f5es pessoais, para tornar o formul\u00e1rio mais organizado e facilitar a leitura e navega\u00e7\u00e3o<\/strong>.<\/p>\n
O exemplo mostra como agrupar campos de dados pessoais, como nome e idade:<\/p>\n
<form>\r\n<fieldset>\r\n<legend>Dados Pessoais<\/legend>\r\n<label for=\"nome\">Nome:<\/label>\r\n<input type=\"text\" id=\"nome\" name=\"nome\">\r\n<label for=\"idade\">Idade:<\/label>\r\n<input type=\"number\" id=\"idade\" name=\"idade\">\r\n<\/fieldset>\r\n<\/form><\/pre>\n
Criar um formul\u00e1rio acess\u00edvel para m\u00faltiplas se\u00e7\u00f5es<\/h3>\n
Ao usar m\u00faltiplos <fieldset> em um formul\u00e1rio, voc\u00ea pode dividir o conte\u00fado em se\u00e7\u00f5es l\u00f3gicas, o que melhora a usabilidade e a acessibilidade<\/strong>.<\/p>\n
Cada <fieldset> pode agrupar um conjunto de campos relacionados, o que torna o formul\u00e1rio mais organizado e compreens\u00edvel a quem acessa, inclusive aqueles que utilizam leitores de tela.<\/p>\n
Confira:<\/p>\n
<form>\r\n<fieldset>\r\n<legend>Informa\u00e7\u00f5es de Contato<\/legend>\r\n<label for=\"email\">Email:<\/label>\r\n<input type=\"email\" id=\"email\" name=\"email\">\r\n<\/fieldset>\r\n<fieldset>\r\n<legend>Prefer\u00eancias<\/legend>\r\n<label for=\"newsletter\">Receber Newsletter:<\/label>\r\n<input type=\"checkbox\" id=\"newsletter\" name=\"newsletter\">\r\n<\/fieldset>\r\n<\/form><\/pre>\n
Usar <fieldset> para criar uma lista edit\u00e1vel de op\u00e7\u00f5es<\/h3>\n
Voc\u00ea pode utilizar <fieldset> para criar uma lista de op\u00e7\u00f5es interativas, em que a pessoa usu\u00e1ria pode editar, adicionar ou remover itens.<\/p>\n
Essa estrutura \u00e9 ideal para criar interfaces como listas de interesses ou prefer\u00eancias, j\u00e1 que oferece uma experi\u00eancia mais din\u00e2mica e organizada<\/strong>.<\/p>\n
<form>\r\n<fieldset>\r\n<legend>Lista de Interesses<\/legend>\r\n<label for=\"interesse1\">Interesse 1:<\/label>\r\n<input type=\"text\" id=\"interesse1\" name=\"interesse1\">\r\n<label for=\"interesse2\">Interesse 2:<\/label>\r\n<input type=\"text\" id=\"interesse2\" name=\"interesse2\">\r\n<\/fieldset>\r\n<\/form><\/pre>\n
Esse exemplo mostra como agrupar os campos de uma lista edit\u00e1vel em um \u00fanico <fieldset>.<\/p>\n
Como estilizar <fieldset> com CSS<\/h2>\n
A estiliza\u00e7\u00e3o de um <fieldset> com CSS permite personalizar<\/strong> o visual para que ele fique mais atrativo e funcional<\/strong>. Confira algumas op\u00e7\u00f5es de personaliza\u00e7\u00e3o a seguir.<\/p>\n
Alterar bordas, cores, espa\u00e7amentos e fontes<\/h3>\n
Com CSS, voc\u00ea pode ajustar diversos aspectos de um <fieldset>, como bordas, cores de fundo e fontes.<\/p>\n
Para alterar a borda, a cor do fundo e o espa\u00e7amento interno, use as propriedades border, background-color e padding, respectivamente. J\u00e1 para personalizar a fonte, use font-family.<\/p>\n
Veja como personalizar essas propriedades:<\/p>\n
<fieldset class=\"custom-fieldset\">\r\n<legend>Informa\u00e7\u00f5es de Contato<\/legend>\r\n<label for=\"email\">Email:<\/label>\r\n<input type=\"email\" id=\"email\" name=\"email\">\r\n<\/fieldset>\r\n<style>\r\n.custom-fieldset {\r\nborder: 2px solid #4CAF50;\r\nbackground-color: #f9f9f9;\r\npadding: 20px;\r\nfont-family: Arial, sans-serif;\r\n}\r\n.custom-fieldset legend {\r\nfont-weight: bold;\r\ncolor: #4CAF50;\r\n}\r\n<\/style><\/pre>\n
Personalizar <legend><\/h3>\n
A tag <legend> pode ser estilizada separadamente para destacar o t\u00edtulo do grupo de campos<\/strong>. Com CSS, voc\u00ea pode mudar a cor, o tamanho da fonte, a posi\u00e7\u00e3o e at\u00e9 o estilo da borda ao redor do texto.<\/p>\n
Exemplo:<\/p>\n
.custom-fieldset legend {\r\nfont-size: 1.2em;\r\ncolor: #333;\r\npadding: 5px;\r\nbackground-color: #e0e0e0;\r\n}<\/pre>\n
Criar um <fieldset> responsivo com CSS<\/h3>\n
Para garantir que seu <fieldset> se adapte a diferentes tamanhos de tela<\/strong>, use unidades relativas como em, % ou vw, e combine-as com media queries para um design responsivo.<\/p>\n
Exemplo:<\/p>\n
.custom-fieldset {\r\nmax-width: 100%;\r\nwidth: auto;\r\n}\r\n@media (max-width: 600px) {\r\n.custom-fieldset {\r\npadding: 15px;\r\n}\r\n}<\/pre>\n
Como usar <fieldset> com Bootstrap?<\/h3>\n
O Bootstrap facilita a estiliza\u00e7\u00e3o do <fieldset> com classes prontas que podem ser aplicadas diretamente.<\/strong><\/p>\n
Ao utilizar o framework, voc\u00ea adiciona bordas, sombras e bordas arredondadas rapidamente para tornar o formul\u00e1rio mais moderno e visualmente atrativo.<\/p>\n
Aqui est\u00e1 um exemplo de como estilizar um <fieldset> por meio do uso de classes do Bootstrap:<\/p>\n
<form>\r\n<fieldset class=\"border border-primary rounded shadow p-3\">\r\n<legend class=\"w-auto px-2\">Informa\u00e7\u00f5es de Contato<\/legend>\r\n<label for=\"email\">Email:<\/label>\r\n<input type=\"email\" id=\"email\" class=\"form-control\" name=\"email\">\r\n<\/fieldset>\r\n<\/form><\/pre>\n
Agora, confira a explica\u00e7\u00e3o:<\/p>\n