Referencia de etiquetas

Etiqueta fieldset en HTML: grupos de controles

La etiqueta <fieldset> en HTML agrupa controles relacionados y puede darles un título con <legend>. Úsala cuando varios campos responden a una misma pregunta o forman una unidad, como las opciones de modalidad de un curso o los datos de contacto de una inscripción.

<fieldset>
  <legend>Modalidad</legend>
  <label><input type="radio" name="modalidad" value="online"> En línea</label>
  <label><input type="radio" name="modalidad" value="presencial"> Presencial</label>
</fieldset>

El navegador suele dibujar un borde alrededor de las opciones y colocar «Modalidad» sobre él. Cada radio tiene su propia etiqueta. Puedes seleccionar una opción; ambas comparten name="modalidad", que establece la exclusión entre ellas. <fieldset> aporta el grupo, pero no causa esa exclusión.

Sintaxis y contexto válido

Escribe tanto <fieldset> como </fieldset>: ninguna de sus etiquetas se puede omitir. Puede aparecer donde se permita contenido de flujo, por ejemplo dentro de <form> o de un <div>. No necesita estar físicamente dentro de un formulario para representar un grupo.

Su contenido admite una <legend> opcional como primer elemento hijo, seguida de contenido de flujo. Además de <input>, puedes incluir párrafos de ayuda, <select>, <textarea>, botones y otros grupos <fieldset>. Coloca el título antes de los campos, fuera de contenedores intermedios. El HTML Living Standard define su significado y modelo de contenido.

Legend nombra el grupo; label nombra cada campo

¿Legend reemplaza a label? No. «Modalidad» plantea la pregunta compartida; «En línea» y «Presencial» identifican las respuestas. Conserva un <label> para cada control, envolviéndolo como arriba o usando for con su id.

También puedes reunir varios campos de texto bajo «Datos de contacto». Esa agrupación permite distinguirlos de otra sección, como «Datos de facturación», aunque ambas incluyan un campo «Nombre». La guía de agrupación de controles de WAI explica estos usos y su relación con la accesibilidad.

Mantén la leyenda breve y las instrucciones visibles junto a los campos. El grupo nativo proporciona contexto a las tecnologías de asistencia; no hace falta añadir role="group". La forma de anunciar la leyenda depende del navegador y del lector de pantalla.

Qué hace disabled en fieldset

<fieldset disabled> deshabilita sus controles descendientes, salvo los que estén dentro de su primera <legend> hija. Esa excepción no elimina un disabled propio del control ni la deshabilitación causada por otro grupo exterior. Es una regla de HTML, no herencia de CSS.

Los controles deshabilitados no se editan mediante la interacción habitual, no reciben el foco por Tab y quedan fuera de los datos del formulario. Los párrafos siguen siendo legibles y un enlace ordinario no se vuelve inactivo. ¿Disabled afecta a todo el contenido? Afecta al estado de los controles; no convierte todo el grupo en contenido oculto o inerte. Consulta las reglas de deshabilitación y construcción de los datos.

disabled es booleano: basta su presencia. disabled="false" también deshabilita el grupo y no es una escritura válida para expresar falso. Para habilitarlo, retira el atributo. Esta regla aparece en la sintaxis de atributos booleanos.

Ejemplo práctico: comparar los datos de una inscripción

Guarda este documento como inscripcion.html en UTF-8 y ábrelo en el navegador. No necesita servidor, CSS ni archivos adicionales. El botón muestra una lista local mediante FormData: no envía, valida ni guarda información.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grupos de una inscripción</title>
  </head>
  <body>
    <h1>Inscripción a un curso</h1>
    <form id="fieldset-inscripcion">
      <fieldset>
        <legend>Datos de contacto</legend>
        <p>
          <label for="fieldset-nombre">Nombre</label>
          <input id="fieldset-nombre" name="nombre" value="Ana López">
        </p>
        <p>
          <label for="fieldset-correo">Correo</label>
          <input type="email" id="fieldset-correo" name="correo"
                 value="ana@example.test">
        </p>
      </fieldset>

      <fieldset>
        <legend>Modalidad</legend>
        <p>
          <label>
            <input type="radio" name="modalidad" value="online" checked>
            En línea
          </label>
        </p>
        <p>
          <label>
            <input type="radio" name="modalidad" value="presencial">
            Presencial
          </label>
        </p>
      </fieldset>

      <fieldset id="fieldset-prestamo" name="prestamo" disabled>
        <legend>
          Préstamo de equipo:
          <label>
            <input type="checkbox" name="aviso_equipo" value="si" checked>
            Recibir aviso
          </label>
        </legend>
        <p>El préstamo todavía no está disponible.</p>
        <label for="fieldset-equipo">Equipo preferido</label>
        <input id="fieldset-equipo" name="equipo" value="Portátil">
      </fieldset>

      <p><button type="button" id="fieldset-ver">Ver datos del formulario</button></p>
    </form>
    <pre id="fieldset-datos" aria-live="polite">Todavía no se han calculado datos.</pre>
    <noscript>
      <p>Sin JavaScript puedes usar los controles habilitados;
         el botón no genera la lista de datos.</p>
    </noscript>

    <script>
      const formulario = document.getElementById("fieldset-inscripcion");
      const boton = document.getElementById("fieldset-ver");
      const resultado = document.getElementById("fieldset-datos");

      boton.addEventListener("click", () => {
        const datos = new FormData(formulario);
        resultado.textContent = Array.from(
          datos, ([nombre, valor]) => `${nombre}=${valor}`
        ).join("\n") || "No hay datos para incluir.";
      });
    </script>
  </body>
</html>

Pulsa «Ver datos del formulario». Con los valores iniciales aparece esta salida:
```
nombre=Ana López
correo=ana@example.test
modalidad=online
aviso_equipo=si
```
«Equipo preferido» permanece deshabilitado y equipo=Portátil no aparece. «Recibir aviso» sí es interactivo porque está en la primera leyenda. Desmárcalo y vuelve a pulsar el botón: desaparece aviso_equipo, porque las casillas sin marcar tampoco aportan un dato.
Retira disabled de fieldset-prestamo en el archivo, guarda y recarga. El campo se habilita y la lista incluye además equipo=Portátil. No aparece un dato prestamo: el name del grupo no crea un valor enviado.
Prueba Tab, las flechas para cambiar la modalidad y Espacio para marcar la casilla. Tab debe saltar el campo deshabilitado. Desactiva JavaScript y recarga: los grupos, etiquetas y estados nativos se conservan; aparece la explicación de <noscript> y el botón deja de calcular datos.

Si sustituyes el grupo de modalidad por un <div> y retiras su <legend>, las radios siguen excluyéndose por name, pero pierden la agrupación y su título accesible nativos. Si haces lo mismo con el grupo de préstamo, también desaparece la deshabilitación colectiva. Para conservar un título de grupo, conserva <fieldset> con <legend>.

Atributos específicos y asociación a form

Además de disabled, <fieldset> admite estos atributos específicos:

Atributo	Función
`form`	Asocia el grupo al `<form>` cuyo `id` coincida, en el mismo documento. Sin el atributo, normalmente se asocia al formulario antecesor.
`name`	Identifica el grupo en `form.elements`; no nombra cada control ni añade una entrada a los datos enviados.

Si colocas un <fieldset form="inscripcion"> fuera de <form id="inscripcion">, sus campos externos necesitan su propia asociación, por ejemplo <input form="inscripcion" name="correo">. form en el grupo no se transmite a sus hijos. Comprueba que el identificador exista y corresponda a un formulario; MDN explica esta precaución.

id y class son atributos globales. border es una propiedad CSS. En JavaScript, grupo.disabled = false modifica el estado del grupo; campo.disabled no indica por sí solo si un antecesor lo deshabilita. campo.matches(":disabled") permite comprobar ese estado efectivo.

Errores frecuentes y etiquetas relacionadas

Evita elegir <fieldset> solo para dibujar un borde: para una caja decorativa puedes usar un <div> con CSS. Quitar el borde con CSS, en cambio, no elimina el significado del grupo.

No uses la leyenda como único nombre de todos los campos ni pongas una <legend> fuera del grupo. No esperes que disabled sea una medida de seguridad: en un formulario real el servidor debe comprobar los datos recibidos.

Las etiquetas relacionadas tienen funciones distintas: <legend> titula el grupo, <label> nombra cada control, <input> recoge una respuesta y <form> organiza el envío. <fieldset> sirve para agrupar una parte de ese formulario; no sustituye a ninguna de ellas.

Compatibilidad y fuentes

Consulta del 4 de octubre de 2026: MDN identifica <fieldset> como ampliamente disponible. Sus datos de compatibilidad registran soporte de disabled, form y name en los navegadores actuales. La presentación y los anuncios de tecnologías de asistencia pueden variar; comprueba los grupos con el navegador y lector de pantalla de tu público.

El HTML Living Standard fija la semántica y la excepción de la primera leyenda; WAI aporta la orientación para agrupar controles de forma comprensible.