type - para que se utiliza la etiqueta fieldset en html

¿Por qué necesitamos una etiqueta fieldset?

Question

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

Busqué información en W3Schools, que dice:

• La etiqueta <fieldset> se usa para agrupar elementos relacionados en un formulario.
• La etiqueta <fieldset> 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" por "lo que hace". Creo que la parte de dibujo es irrelevante, y no veo por qué necesitamos una etiqueta especial solo para agrupar algunos elementos relacionados en un formulario.

Answer 1

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

Answer 2

El ejemplo más obvio y práctico 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">Red</label>

</fieldset>

Esto permite etiquetar cada botón de radio al tiempo que proporciona una etiqueta para el grupo como un todo. Esto es especialmente importante cuando se usa tecnología asistencial (como un lector de pantalla) donde la asociación de los controles y su leyenda no puede estar implícita en la presentación visual.

Answer 3

Es necesario para la accesibilidad.

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

El conjunto de fieldset y la legend elementos de HTML 4 fieldset permiten diseñar y organizar un formulario grande con muchas áreas de interés diferentes de una manera lógica sin usar tablas. La etiqueta fieldset se puede usar para crear recuadros alrededor de los elementos seleccionados y la legend le dará un título a esos elementos. De esta forma, los elementos del formulario se pueden agrupar en categorías identificadas.

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

Answer 4

Fieldset organiza los elementos en formularios de forma lógica, pero también mejora la accesibilidad para quienes usan navegadores aurales. 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.

Answer 5

Lo encuentro útil para el estilo de CSS y la asociación de etiquetas a los controles. Hace que sea fácil colocar un contenedor visual alrededor de un grupo de campos y alinear las etiquetas.

Answer 6

Me gusta que cuando rodees tus radios con fieldset, y no coloques identificadores en las etiquetas de entrada de tu botón de radio, entonces el grupo representado por el fieldset se agregue a la cadena como si fuera un solo elemento.

Esto le permite desplazarse a través de un formulario, y cuando llega a un conjunto de campo, puede usar las teclas de flecha para cambiar la radio seleccionada, y luego tabular cuando haya terminado.

Además, no olvides la accesibilidad. Los lectores de pantalla necesitan fieldset + legend para comprender su formulario y poder leerlo para el usuario de una forma natural. Siéntase libre de desaparecer la leyenda si no desea que los usuarios con vista lo vean. Diseñar y diseñar la leyenda con CSS es a veces peligroso, especialmente con navegadores heredados, por lo que me resulta invisible para usuarios de lectores de pantalla y agrego un span separado aria-hidden = "true" con el estilo de una etiqueta para Los usuarios con vista simplifican el estilo y lo mantienen accesible.

Answer 7

Otra característica de fieldset es que inhabilitarla deshabilita todos los campos que contiene.

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

Answer 8

Yo uso fieldsets para agrupar entradas de formularios, cuando tengo una gran forma y quiero dividirla en una especie de asistente de formularios.

Estas mismas preguntas fueron respondidas here en SO.