Por que precisamos de uma tag fieldset?

Por que precisamos de uma <fieldset>tag? Qualquer que seja o objetivo, é provavelmente um subconjunto da tag do formulário.

Procurei algumas informações sobre o W3Schools, que diz:

• A <fieldset>tag é usada para agrupar elementos relacionados em um formulário.
• A <fieldset>tag desenha uma caixa ao redor dos elementos relacionados.

Mais explicações para quem está confundindo "por que existe na especificação" com "o que faz". Acho que a parte do desenho é irrelevante e não vejo por que precisamos de uma tag especial apenas para agrupar alguns elementos relacionados em um formulário.

O exemplo mais óbvio e prático é:

<fieldset>
  <legend>Colour</legend>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Blue</label>

</fieldset>

Isso permite que cada botão de opção seja rotulado, além de fornecer um rótulo para o grupo como um todo. Isso é especialmente importante quando a tecnologia assistida (como um leitor de tela) está sendo usada, onde a associação dos controles e sua legenda não pode ser implícita pela apresentação visual.

Outra característica do fieldset é que desativá-lo desativa todos os campos contidos nele.

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

É necessário para acessibilidade.

Confira: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

As HTML 4 elementos fieldsete legendpermitem que você layout e organizar uma forma grande com muitas áreas diferentes de interesse de uma forma lógica sem o uso de tabelas. A fieldsettag pode ser usada para criar caixas em torno dos elementos selecionados e a legendlegenda fornecerá uma legenda para esses elementos. Dessa maneira, os elementos do formulário podem ser agrupados em categorias identificadas.

Navegadores diferentes podem exibir a fieldsetborda padrão de maneiras diferentes. As folhas de estilo em cascata podem ser usadas para remover a borda ou alterar sua aparência.

Conforme descrito aqui , o objetivo dessa tag é fornecer clareza à organização do formulário e permitir ao designer um acesso mais fácil para decorar os elementos do formulário.

O Fieldset organiza itens de forma lógica, mas também melhora a acessibilidade para quem usa navegadores auditivos. O Fieldset é útil e, portanto, era muito popular no passado em muitos aplicativos, então eles o implementaram em html também.

Gosto que, quando você envolve seus rádios com o fieldset e não coloca identificações nas tags de entrada dos botões de opção, o grupo representado pelo fieldset é adicionado ao tabchain como se fosse um único item.

Isso permite que você navegue por um formulário e, quando chegar a um conjunto de campos, use as teclas de seta para mudar o rádio selecionado e depois se afastar quando terminar.

Além disso, não esqueça a acessibilidade. Os leitores de tela precisam de fieldset + legend para entender seu formulário e poder lê-lo para o usuário de algum modo natural. Sinta-se livre para desaparecer a lenda se você não quiser que os usuários com visão o vejam. Dispor e modelar a legenda da maneira certa com CSS às vezes é difícil entre navegadores, especialmente com navegadores legados, então acho que tornar a tag legend invisível para os usuários de leitores de tela e adicionar um espaço separado, escondido por ária = "true" denominado como um rótulo para usuários com visão simplificam o estilo das coisas e mantêm as coisas acessíveis.

Acho útil para estilizar CSS e associar rótulos a controles. Isso facilita colocar um contêiner visual em torno de um grupo de campos e alinhar os rótulos.

Eu uso conjuntos de campos para agrupar entradas de formulário, quando tenho um formulário enorme e quero dividi-lo em uma espécie de assistente de formulário.

Essas mesmas perguntas foram respondidas aqui no SO.

Apenas resumindo algumas vantagens:

O <fieldset> elemento HTML  é usado para agrupar vários controles e rótulos ( <label>) em um formulário da Web, conforme definido pelo MDN .

Em outras palavras: a tag fieldset permite agrupar logicamente conjuntos de campos para que seus formulários sejam mais descritivos. Portanto, um conjunto de controles de formulário opcionalmente agrupados sob um nome comum.

<fieldset>
  <legend>Choose your favorite animal</legend>

  <input type="radio" id="dog" name="animal">
  <label for="dog">Dog</label><br/>

  <input type="radio" id="cat" name="animal">
  <label for="cat">Cat</label><br/>
</fieldset>

As " vantagens " de usar um conjunto de campos são:

• eles permitem que você marque seus dados (neste caso, um formulário) da maneira mais semântica maneira disponível. Considere que colocar seus campos em um conjunto de campos é mais descritivo do que colocar seus campos em uma div. A div não diz nada sobre o relacionamento entre os campos, um conjunto de campos informa que há um relacionamento.
• usando desativado , ele permite desativar o e todo o seu conteúdo de uma só vez.
• é útil acessibilidade

Quanto a mim, uma das maiores vantagens do <fieldset>...</fieldset>elemento é a capacidade de preservar o <form>...</form>contexto, mesmo que o<fieldset>...</fieldset> não esteja dentro do formulário.

Por exemplo, o seguinte formulário:

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

é semanticamente idêntico à seguinte forma:

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>