Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Agrupamento de Elementos de Formulário para Melhor Estrutura | Formulários HTML e Entrada do Usuário
HTML Definitivo
course content

Conteúdo do Curso

HTML Definitivo

HTML Definitivo

1. Compreendendo o Desenvolvimento Web
2. Tags e Atributos HTML
3. Estrutura do Documento HTML
4. Trabalhando com Mídia e Tabelas

book
Agrupamento de Elementos de Formulário para Melhor Estrutura

Quando os elementos estão relacionados entre si, é benéfico agrupá-los, pois isso ajuda o usuário a compreender melhor o formulário e permite que ele se concentre em conjuntos menores e estruturados de campos, em vez de tentar entender todo o formulário de uma só vez. O agrupamento pode ser realizado tanto visualmente na interface quanto logicamente no código.

Elementos fieldset e legend

Você pode usar o elemento <fieldset> para agrupar vários elementos de formulário relacionados. Ele fornece um contêiner para esses elementos, e você pode adicionar um título ao grupo utilizando o elemento <legend> aninhado. É importante agrupar botões de opção (radio buttons) e caixas de seleção (checkboxes) relacionados, e outros tipos de campos também podem ser agrupados conforme necessário. Isso contribui para melhorar a organização e a clareza do formulário para o usuário.

html

index.html

css

index.css

copy

Exemplo

Este exemplo utiliza o elemento fieldset para agrupar controles de formulário relacionados e o elemento legend para fornecer uma legenda ao grupo. O foco é um formulário de seleção de produtos onde os usuários podem escolher vários produtos.

html

index.html

css

index.css

copy
  • fieldset agrupa as caixas de seleção, tornando o formulário mais organizado e fácil de entender para o usuário;
  • legend fornece um título, indicando ao usuário que a seção é destinada à escolha de produtos;
  • As caixas de seleção permitem que o usuário selecione vários produtos entre as opções disponíveis. Cada opção está associada a um produto específico (vegetal, fruta, laticínio).

Nota

Parabéns por concluir o curso de HTML! Você chegou ao capítulo final e agora possui uma base sólida em desenvolvimento web. Se tiver interesse em explorar ainda mais a área, considere aprofundar-se em CSS – a linguagem de estilização e design de páginas web. Aprimore suas habilidades e desbloqueie infinitas possibilidades para criar sites visualmente atraentes.

1. Qual é a finalidade do elemento legend em fieldsets HTML?

2. Por que é importante agrupar elementos de formulário relacionados com o elemento fieldset?

question mark

Qual é a finalidade do elemento legend em fieldsets HTML?

Select the correct answer

question mark

Por que é importante agrupar elementos de formulário relacionados com o elemento fieldset?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 10
Sentimos muito que algo saiu errado. O que aconteceu?
some-alt