Por que precisamos de uma tag fieldset?

165

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.

Monge Oriental
fonte
30
Por que precisamos de alguma tag? Por que precisamos de uma tag img quando podemos criar uma imagem a partir de 1px divs com cores de fundo?
Oded
127
Observe: o W3C não tem nada a ver com o w3schools.
Wesley Murch
82
Não se refira a w3schools. Basta usar MDN: fieldset @ MDN .
1313 Sirko #
9
@ Madmartigan eu sei. Mas o W3C fornece apenas especificações que não achei muito úteis para responder minha pergunta.
Eastern Monk
2
Sobre (não) usando W3Schools e usando sites mais confiáveis para informações técnicas: w3fools.com
Denilson Sá Maia

Respostas:

187

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.

Quentin
fonte
4
Não tenho um link à mão, mas aparentemente muitos leitores de tela leem o texto da legenda antes de cada rótulo no conjunto de campos.
Wesley Murch
8
@ Madmartigan - Isso é uma coisa boa, significa que você sabe que ainda está lidando com o mesmo conjunto de botões de opção. (É também um motivo para garantir que a legenda seja concisa ).
Quentin
1
"tecnologia assistida" que faz muito sentido.
Eastern Monk
5
Além disso, o <fieldset> pode ser usado para 'desativar' os elementos agrupados. Eu espero que <fieldset> também seja usado para especificar se um grupo é necessário adicionando o atributo 'required' à tag, infelizmente isso não funciona!
Simon Savai 4/06
41

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>

Preço de Collin
fonte
6
Certamente, alguém poderia argumentar que o disabledatributo, como ele funciona para se fieldsetcontroles de forma, também deveria ter sido implementado para o formelemento. Faria sentido para isso, não faria?
amn
25

É 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.

Eric Sites
fonte
fieldset não está presente no HTML4. É um recurso HTML5
radio_head
5
Ele saiu no HTML 4.0.1 - w3.org/TR/html401/interact/forms.html#h-17.10
Eric Sites
14

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.

dthagard
fonte
6

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.

Boris D. Teoharov
fonte
4

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.

DWoldrich
fonte
This lets you tab through a form, and when you get to a fieldset, you can use arrow keys to change the selected radio, and then tab away when you're done.- Esse é o comportamento padrão das entradas de rádio e não tem nada a ver com conjuntos de campos. As caixas de seleção se comportam de maneira diferente por padrão.
Vladimir Kornea
2

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.

Chuck Spohr
fonte
2

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.

Eric H.
fonte
2

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
mmsilviu
fonte
1

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>
altgov3en
fonte