Summary
This chapter covers how to group related form controls using the fieldset and legend elements to improve code structure and user comprehension.

General domain of usage
E-commerce product selection form

Cuando los elementos están relacionados entre sí, es beneficioso agruparlos, ya que ayuda al usuario a comprender mejor el formulario y le permite concentrarse en conjuntos más pequeños y estructurados de campos en lugar de intentar entender todo el formulario a la vez. El agrupamiento puede realizarse tanto visualmente en la interfaz como lógicamente en el código.

## Elementos fieldset y legend
Se puede utilizar el elemento `<fieldset>` para agrupar varios elementos de formulario relacionados. Proporciona un contenedor para estos elementos, y se puede añadir un título de grupo utilizando el elemento `<legend>` anidado. Es importante agrupar los botones de opción y las casillas de verificación relacionadas, y también se pueden agrupar otros tipos de campos según sea necesario. Esto ayuda a mejorar la organización y claridad del formulario para el usuario.

PGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+Cgo8Zm9ybSBvbnN1Ym1pdD0icmV0dXJuIGZhbHNlIj4KICA8ZmllbGRzZXQ+CiAgICA8bGVnZW5kPkNvbnRhY3QgZGV0YWlsczwvbGVnZW5kPgogICAgPGxhYmVsPgogICAgICBOYW1lCiAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBuYW1lPSJ1c2VybmFtZSIgLz4KICAgIDwvbGFiZWw+CiAgICA8bGFiZWw+CiAgICAgIEVtYWlsCiAgICAgIDxpbnB1dCB0eXBlPSJlbWFpbCIgbmFtZT0iZW1haWwiIC8+CiAgICA8L2xhYmVsPgogICAgPGxhYmVsPgogICAgICBQaG9uZSBOdW1iZXIKICAgICAgPGlucHV0IHR5cGU9InRlbCIgbmFtZT0icGhvbmUiIC8+CiAgICA8L2xhYmVsPgogIDwvZmllbGRzZXQ+CiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlNlbmQ8L2J1dHRvbj4KPC9mb3JtPg==

bGFiZWx7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwp9

### Ejemplo
Este ejemplo utiliza el elemento `fieldset` para agrupar controles de formulario relacionados y el elemento `legend` para proporcionar un título al grupo. Se centra en un formulario de selección de productos donde los usuarios pueden elegir varios productos.

PGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgCjxmb3JtIG9uc3VibWl0PSJyZXR1cm4gZmFsc2UiPgogIDxmaWVsZHNldD4KICAgIDxsZWdlbmQ+Q2hvb3NlIHRoZSBwcm9kdWN0czwvbGVnZW5kPgogICAgPGxhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9InByb2R1Y3QiIHZhbHVlPSJ2ZWdldGFibGUiIC8+CiAgICAgIHZlZ2V0YWJsZQogICAgPC9sYWJlbD4KICAgIDxsYWJlbD4KICAgICAgPGlucHV0IHR5cGU9ImNoZWNrYm94IiBuYW1lPSJwcm9kdWN0IiB2YWx1ZT0iZnJ1aXQiIC8+CiAgICAgIGZydWl0CiAgICA8L2xhYmVsPgogICAgPGxhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9InByb2R1Y3QiIHZhbHVlPSJkYWlyeSIgLz4KICAgICAgZGFpcnkKICAgIDwvbGFiZWw+CiAgPC9maWVsZHNldD4KICA8YnV0dG9uIHR5cGU9InN1Ym1pdCI+T3JkZXI8L2J1dHRvbj4KPC9mb3JtPg==

- El `fieldset` agrupa las casillas de verificación, haciendo que el formulario sea más organizado y fácil de entender para el usuario;
- El `legend` proporciona un título, indicando al usuario que la sección es para elegir productos;
- Las casillas de verificación permiten al usuario seleccionar varios productos de las opciones disponibles. Cada opción está asociada a un producto específico (verdura, fruta, lácteo).


> Nota
>
> ¡Felicidades por completar el curso de HTML! Has llegado al capítulo final y ahora cuentas con una base sólida en desarrollo web. Si te interesa seguir explorando el área, considera adentrarte en <a href="https://codefinity.com/courses/v2/a5d6ef50-cbf5-4a95-89d4-475b704cd811" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> CSS</a> - el lenguaje para el diseño y estilo de páginas web. Mejora tus habilidades y desbloquea infinitas posibilidades para crear sitios visualmente atractivos.

¿Cuál es el propósito del elemento `legend` en los fieldsets de HTML?

¿Por qué es importante agrupar elementos de formulario relacionados con el elemento `fieldset`?

Aprenda los conceptos esenciales de HTML (Lenguaje de Marcado de Hipertexto), la base del desarrollo web. Este curso introductorio cubre etiquetas, atributos, elementos y la estructuración de páginas web. Adquiera habilidades prácticas en la creación de encabezados, párrafos, listas, imágenes, enlaces, formularios y tablas. Explore buenas prácticas, optimización y accesibilidad web. Inicie su trayectoria en desarrollo web con HTML.

Explora el funcionamiento interno de la web. Descubre cómo los datos se transmiten a través de las redes, el papel de los protocolos y los conceptos de direcciones IP y nombres de dominio. Obtén una visión general de cómo los navegadores web y los servidores se comunican para entregar contenido web.

Descubra el poder de las etiquetas para estructurar el contenido, desde encabezados y párrafos hasta listas y tablas. Aprenda cómo mejorar los elementos con atributos.

El núcleo de la estructura de un documento HTML. Aprenda los componentes de un documento HTML, incluyendo la declaración doctype, head y body. Comprenda el propósito de cada elemento y cómo contribuyen a la estructura general de una página web.

Mejorar la apariencia de una página web mediante el uso de medios como imágenes, audio y video. Manipulación de datos tabulares estructurados en forma de tablas.

Explore la versatilidad de los formularios HTML. Aprenda a diseñar formularios intuitivos y fáciles de usar mediante el aprovechamiento de conceptos y técnicas clave. Descubra cómo los formularios permiten la interacción del usuario y el envío de datos en los sitios web.

Agrupación de Elementos de Formulario para una Mejor Estructura

Awesome!

Agrupación de Elementos de Formulario para una Mejor Estructura