¿Como funciona el comando en HTML5: 'fieldset'?

Detalles sobre el elemento <fieldset> en HTML5

El elemento <fieldset> es un contenedor utilizado en formularios HTML para agrupar elementos afines y mejorar la estructura y accesibilidad del formulario. A menudo, se emplea junto con el elemento <legend> para proporcionar una descripción del grupo de controles dentro del <fieldset>.

Atributos del elemento <fieldset>

1. disabled:

   • Descripción: Este atributo booleano, cuando está presente, deshabilita todos los controles dentro del <fieldset>, lo que impide que los usuarios interactúen con ellos.
   • Ejemplo: <fieldset disabled>

2. form:

   • Descripción: Este atributo acepta el valor id de un formulario externo (principalmente utilizado cuando los elementos del formulario no están anidados dentro de un <form>).
   • Ejemplo: <fieldset form="form_id">

3. name:

   • Descripción: Este atributo puede ser utilizado para darle un nombre identificativo al <fieldset>, aunque no es comúnmente usado en prácticas avanzadas de HTML5.
   • Ejemplo: <fieldset name="group_name">

4. class y id (Herencia de atributos globales):

   • Descripción: Permite definir clases o identificadores únicos dentro del documento HTML, usados para aplicar estilos CSS o manipulación con JavaScript.
   • Ejemplo: <fieldset id="group1" class="group_class">

5. hidden:

   • Descripción: Un atributo booleano que indica que el <fieldset> no debe ser mostrado a los usuarios, aunque sigue siendo parte del DOM y accesible por scripts.
   • Ejemplo: <fieldset hidden>

6. Other Global Attributes: Que incluyen lang, style, title, entre otros, utilizados para definir el comportamiento y la apariencia del elemento fieldset.

Uso de <fieldset> en HTML5 con ejemplos

Ejemplo 1: Agrupación Básica con <legend>

<form>
  <fieldset>
    <legend>Información Personal</legend>
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name">

    <label for="email">Correo Electrónico:</label>
    <input type="email" id="email" name="email">
  </fieldset>

  <fieldset>
    <legend>Detalles de la Cuenta</legend>
    <label for="username">Usuario:</label>
    <input type="text" id="username" name="username">

    <label for="password">Contraseña:</label>
    <input type="password" id="password" name="password">
  </fieldset>

  <input type="submit" value="Enviar">
</form>

Ejemplo 2: Usando el atributo disabled

<form>
  <fieldset disabled>
    <legend>Información del Pago</legend>
    <label for="cardNumber">Número de Tarjeta:</label>
    <input type="text" id="cardNumber" name="cardNumber">

    <label for="expiryDate">Fecha de Expiración:</label>
    <input type="text" id="expiryDate" name="expiryDate">
  </fieldset>

  <input type="submit" value="Enviar">
</form>

En el ejemplo anterior, los campos de información del pago están deshabilitados, lo que indica al usuario que estos campos no pueden ser editados o interactuados hasta que se cumpla cierta condición en la lógica del formulario.

Ejemplo 3: Uso del atributo form en un <fieldset> fuera del <form>

<form id="mainForm">
  <input type="text" name="firstField">
</form>

<fieldset form="mainForm">
  <legend>Información Adicional</legend>
  <label for="age">Edad:</label>
  <input type="text" id="age" name="age">
</fieldset>

<input type="submit" form="mainForm" value="Enviar Formulario">

Este ejemplo muestra cómo el atributo form permite que un <fieldset> ubicado fuera del <form> aún esté asociado con él.

En resumen, el elemento <fieldset> es una herramienta poderosa y flexible en HTML5 para organizar y mejorar la accesibilidad de los formularios, proporcionando tanto una estructura clara como funcionalidad adicional a través de sus diversos atributos.