<fieldset>: elemento HTML de grupo de campos

Pruébalo

<form>
  <fieldset>
    <legend>Elige tu monstruo favorito</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

legend {
  background-color: black;
  color: white;
  padding: 3px 6px;
}

input {
  margin: 0.4rem;
}

Como muestra el ejemplo anterior, el elemento <fieldset> agrupa una parte de un formulario HTML, y un elemento <legend> anidado le da un título al <fieldset>. Admite pocos atributos. Los más destacados son form, que puede contener el id de un <form> de la misma página y permite que el <fieldset> forme parte de ese <form> aunque no esté anidado dentro de él, y disabled, que permite deshabilitar de una vez el <fieldset> y todo su contenido.

Atributos

Este elemento incluye los atributos globales.

disabled

Si se establece este atributo booleano, todos los controles de formulario descendientes del <fieldset> quedan deshabilitados: no se pueden editar y no se envían junto con el <form>. Tampoco reciben eventos de navegación, como los clics del ratón o los eventos relacionados con el foco. De forma predeterminada, los navegadores muestran estos controles en gris. Ten en cuenta que los elementos de formulario que están dentro del elemento <legend> no se deshabilitan.

form

Este atributo toma el valor del atributo id de un elemento <form> del que quieres que forme parte el <fieldset>, aunque no esté dentro del formulario. Ten en cuenta que su uso resulta confuso: si quieres que los elementos <input> que están dentro del <fieldset> se asocien con el formulario, tienes que usar el atributo form directamente en esos elementos. Puedes comprobar qué elementos están asociados con un formulario desde JavaScript, con HTMLFormElement.elements.

name

El nombre asociado con el grupo.

Nota: El título del fieldset lo da el primer elemento <legend> anidado dentro de él.

Estilos con CSS

Hay varias consideraciones especiales al aplicar estilos a <fieldset>.

Su valor de display es block de forma predeterminada, y establece un contexto de formato de bloque. Si al <fieldset> se le aplica un valor de display de nivel de línea, se comporta como inline-block; en cualquier otro caso, se comporta como block. De forma predeterminada, rodea el contenido un borde groove de 2px y tiene un pequeño relleno predeterminado. El elemento tiene min-inline-size: min-content de forma predeterminada.

Si hay un elemento <legend>, se coloca sobre el borde block-start. El <legend> se ajusta a su contenido y también establece un contexto de formato. Su valor de display se convierte en bloque. (Por ejemplo, display: inline se comporta como block).

Habrá una caja anónima que contiene el contenido del <fieldset> y que hereda algunas propiedades del <fieldset>. Si al <fieldset> se le aplica display: grid o display: inline-grid, la caja anónima será un contexto de formato de cuadrícula. Si al <fieldset> se le aplica display: flex o display: inline-flex, la caja anónima será un contexto de formato flexible. En cualquier otro caso, establece un contexto de formato de bloque.

Puedes aplicar a <fieldset> y <legend> los estilos que quieras para adaptarlos al diseño de tu página.

Ejemplos

Fieldset básico

Este ejemplo incluye un <fieldset> con un <legend> y un único control dentro.

<form action="#">
  <fieldset>
    <legend>¿Estás de acuerdo?</legend>
    <input type="checkbox" id="chbx" name="agree" value="Yes!" />
    <label for="chbx">Estoy de acuerdo</label>
  </fieldset>
</form>

Resultado

Fieldset deshabilitado

Este ejemplo muestra un <fieldset> deshabilitado con dos controles dentro. Observa que los dos controles quedan deshabilitados por estar dentro de un <fieldset> deshabilitado.

<form action="#">
  <fieldset disabled>
    <legend>Fieldset de inicio de sesión deshabilitado</legend>
    <div>
      <label for="name">Nombre: </label>
      <input type="text" id="name" value="Chris" />
    </div>
    <div>
      <label for="pwd">Arquetipo: </label>
      <input type="password" id="pwd" value="Wookie" />
    </div>
  </fieldset>
</form>

Resultado

Resumen técnico

Especificaciones

Compatibilidad con navegadores

Véase también

• El elemento <legend>
• El elemento <input>
• El elemento <label>
• El elemento <form>