¿Por qué necesitamos una etiqueta de conjunto de campos?

¿Por qué necesitamos una <fieldset>etiqueta? Cualquiera que sea el propósito, probablemente sea un subconjunto de la etiqueta de formulario.

Busqué información sobre W3Schools, que dice:

• La <fieldset>etiqueta se usa para agrupar elementos relacionados en un formulario.
• La <fieldset>etiqueta dibuja un cuadro alrededor de los elementos relacionados.

Más explicación para aquellos que están confundiendo "por qué existe en la especificación" con "lo que hace". Creo que la parte del dibujo es irrelevante, y no veo por qué necesitamos una etiqueta especial solo para agrupar algunos elementos relacionados en un formulario.

El ejemplo práctico más obvio es:

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

Esto permite etiquetar cada botón de radio y al mismo tiempo proporcionar una etiqueta para el grupo en su conjunto. Esto es especialmente importante cuando se utiliza tecnología de asistencia (como un lector de pantalla) donde la asociación de los controles y su leyenda no pueden estar implícitos en la presentación visual.

Otra característica del conjunto de campos es que deshabilitarlo deshabilita todos los campos contenidos en él.

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

Es necesario para la accesibilidad.

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

Los elementos HTML 4 fieldsety le legendpermiten diseñar y organizar un formulario grande con muchas áreas diferentes de interés de una manera lógica sin usar tablas. La fieldsetetiqueta se puede usar para crear cuadros alrededor de los elementos seleccionados y legendle dará un título a esos elementos. De esta forma, los elementos de formulario se pueden agrupar en categorías identificadas.

Los diferentes navegadores pueden mostrar el fieldsetborde predeterminado de diferentes maneras. Las hojas de estilo en cascada se pueden usar para eliminar el borde o cambiar su apariencia.

Como se describe aquí , el propósito de esta etiqueta es proporcionar claridad a la organización del formulario y permitir a un diseñador un acceso más fácil para decorar elementos del formulario.

Fieldset organiza los elementos de forma lógica, pero también mejora la accesibilidad para aquellos que usan navegadores auditivos. Fieldset es útil y, por lo tanto, fue muy popular en el pasado en muchas aplicaciones, por lo que también lo implementaron en html.

Me gusta que cuando rodeas tus radios con un conjunto de campos, y no pones identificadores en las etiquetas de entrada de los botones de radio, el grupo representado por el conjunto de campos se agrega a la cadena de pestañas como si fuera un solo elemento.

Esto le permite desplazarse por un formulario y, cuando llegue a un conjunto de campos, puede usar las teclas de flecha para cambiar la radio seleccionada y luego eliminar cuando haya terminado.

Además, no olvides la accesibilidad. Los lectores de pantalla necesitan fieldset + legend para comprender su formulario y poder leerlo al usuario de una manera natural. Siéntase libre de desaparecer la leyenda si no desea que los usuarios videntes la vean. Diseñar y diseñar la leyenda a la perfección con CSS es a veces cruzadores cruzados, especialmente con navegadores heredados, por lo que encuentro que la etiqueta de la leyenda es invisible para los usuarios de lectores de pantalla y agrego un espacio separado, aria-hidden = "true" diseñado como una etiqueta para Los usuarios videntes hacen que las cosas sean simples de diseñar y mantienen las cosas accesibles.

Me resulta útil para diseñar CSS y asociar etiquetas a controles. Facilita colocar un contenedor visual alrededor de un grupo de campos y alinear las etiquetas.

Utilizo conjuntos de campos para agrupar entradas de formulario, cuando tengo un formulario enorme y quiero dividirlo en una especie de asistente de formularios.

Estas mismas preguntas fueron respondidas aquí en SO.

Solo resumiendo algunas ventajas:

El <fieldset> elemento HTML  se usa para agrupar varios controles, así como etiquetas ( <label>) dentro de un formulario web tal como lo define MDN .

En otras palabras: la etiqueta de conjunto de campos le permite agrupar lógicamente conjuntos de campos para que sus formularios sean más descriptivos. Entonces, un conjunto de controles de formulario opcionalmente agrupados bajo un nombre común.

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

Las " ventajas " de usar un conjunto de campos son:

• le permiten marcar sus datos (en este caso, un formulario) de la manera más semántica disponible. Considere que colocar sus campos en un conjunto de campos es más descriptivo que colocar sus campos en un div. El div no le dice nada sobre la relación entre los campos, un conjunto de campos le dice que hay una relación.
• mediante el uso de disabled , le permite desactivar el y todos sus contenidos de una sola vez.
• es útil para la accesibilidad

En cuanto a mí, una de las mayores ventajas del <fieldset>...</fieldset>elemento es la capacidad de preservar el <form>...</form>contexto, incluso si <fieldset>...</fieldset>no está dentro del formulario.

Por ejemplo, la siguiente forma:

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

es semánticamente idéntico a la siguiente forma:

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