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

165

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

Monje oriental
fuente
30
¿Por qué necesitamos alguna etiqueta? ¿Por qué necesitamos una etiqueta img cuando podemos crear una imagen de 1px divs con colores de fondo?
Oded
127
Tenga en cuenta: W3C no tiene nada que ver con w3schools.
Wesley Murch
82
No se refiera a w3schools. Simplemente use MDN: fieldset @ MDN .
Sirko
9
@Madmartigan lo sé. Pero el W3C solo proporciona especificaciones que no encontré de mucha utilidad para responder a mi pregunta.
Eastern Monk
2
Sobre (no) usar W3Schools y usar sitios más confiables para obtener información técnica: w3fools.com
Denilson Sá Maia

Respuestas:

187

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.

Quentin
fuente
44
No tengo un enlace a mano, pero aparentemente muchos lectores de pantalla leen el texto de la leyenda antes de cada etiqueta en el conjunto de campos.
Wesley Murch
8
@Madmartigan: eso es algo bueno, significa que sabe que todavía está lidiando con el mismo conjunto de botones de radio. (También es una razón para garantizar que la leyenda sea concisa ).
Quentin
1
"tecnología de asistencia" que tiene mucho sentido.
Eastern Monk
55
Además, <fieldset> se puede usar para 'deshabilitar' elementos agrupados. Espero que <fieldset> también se use para especificar si se requiere un grupo al agregar el atributo 'required' a la etiqueta, ¡desafortunadamente eso no funciona!
Simon Savai
41

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>

Precio Collin
fuente
66
Por supuesto, uno podría argumentar que el disabledatributo, tal como funciona para fieldsetsy controles de formulario, también debería haberse implementado para el formelemento. Tendría sentido, ¿no?
amn
25

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.

Sitios Eric
fuente
El conjunto de campos no está presente en HTML4. Es una función HTML5
radio_head
55
Salió en HTML 4.0.1 - w3.org/TR/html401/interact/forms.html#h-17.10
Eric Sites
14

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.

dthagard
fuente
6

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.

Boris D. Teoharov
fuente
4

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.

DWoldrich
fuente
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.- Ese es el comportamiento predeterminado de las entradas de radio y no tiene nada que ver con los conjuntos de campos. Las casillas de verificación se comportan de manera diferente de manera predeterminada.
Vladimir Kornea
2

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.

Chuck Spohr
fuente
2

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.

Eric H.
fuente
2

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

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