Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Fieldset e Legend

Uma dúvida no meu estágio que eu fazia algumas landing pages e continham formulários, nunca me foi falado sobre o fieldset e o legend, até que ponto essas duas tags são importantes, se alguém souber me explicar essa importância tirando a parte do SEO do Google o que mais ele seria válido para eu ter que utilizá-lo?

5 respostas
solução!

Olá, Israel.

Tudo bem?

A <fieldset> tag é usada para agrupar elementos relacionados em um formulário, é como se ela desenhasse uma caixa ao redor dos elementos relacionados.

Eu não vejo como algo muito importante na minha opinião. Lembrando que é utilizada dentro de formulários assim como a <label>.

Espero ter ajudado de alguma forma. Qualquer dúvida manda aqui. Valeu.

Sim ajudou, entendi o que ela faz, a dúvida só era a parte da importância de utilizar ela e o legend.

Na minha opinião, poderia ser feito dessas duas maneiras tranquilamente:

Fieldset e Legend:

<fieldset>
                    <legend>Qual destino prefere?</legend>
                    <select>
                        <option disabled selected>Selecione um destino</option>
                        <option>Japão</option>
                        <option>Brasil</option>
                        <option>Espanha</option>
                    </select>
</fieldset>

Div e Label:

<div>
                    <label for="select-destino">Qual destino prefere?</label>
                    <select id="select-destino">
                        <option disabled selected>Selecione um destino</option>
                        <option>Japão</option>
                        <option>Brasil</option>
                        <option>Espanha</option>
                    </select>
</div>

Fieldset é mais semântico.

é eu testei e o resultado é o mesmo, só mudar o display do label que é inline enquanto no legend já vem block. Olhando por esse lado acho que ficaria até melhor usar o modo do fieldset e legend porque já inclui a semântica pro SEO, ai a única parte da dúvida é se eu poderia por id e class para usar no JS igual o feito embaixo com label e select (eu entendi que é para fazer a referência entre eles).

Eu acho que isso da referência é o de menos, pois quando clica na label mesmo referenciado, não abre as opções do select só indica que faz parte dele mesmo, se fosse input de texto normal quando clicasse na label ja selecionava o campo para digitar quando referenciado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software