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.

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.

• 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 CSS - el lenguaje para el diseño y estilo de páginas web. Mejora tus habilidades y desbloquea infinitas posibilidades para crear sitios visualmente atractivos.