Elemento fieldset

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento fieldset representa un conjunto de controles en un formulario (form), opcionalmente agrupados bajo un mismo nombre. Este elemento puede ser particularmente útil en formularios grandes, donde la legibilidad y la facilidad de acceso pueden ser mejoradas mediante la segmentación. Lo navegadores mostrarán normalmente un marco alrededor de los controles agrupados.

Un fieldset puede adicionalmente tener un título o nombre, que puede ser provisto por el elemento legend. En tal caso, el elemento legend debe ser el primer hijo de fieldset.

Ejemplos

En nuestro primer ejemplo, agruparemos temáticamente los controles de un formulario. Todos los controles en un grupo son contenidos por fieldset, y son declarados luego de su etiqueta (legend).

<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>Información personal</legend>
    <p>Nombre completo: <input type="text" name="nombrecompleto"></p>
    <p>Dirección: <input type="text" name="direccion"></p>
    <p>Teléfono: <input type="tel" name="telefono"></p>
  </fieldset>
  <fieldset>
    <legend>Información laboral</legend>
    <p>Compañía: <input type="text" name="compania"></p>
    <p>Dirección: <input type="text" name="direcciontrabajo"></p>
    <p>Teléfono: <input type="tel" name="telefonotrabajo"></p>
  </fieldset>
  <p><input type="submit" value="Enviar información"></p>
</form>
Información personal

Nombre completo:

Dirección:

Teléfono:

Información laboral

Compañía:

Dirección:

Teléfono:

Un fieldset puede estar opcionalmente deshabilitado, al establecerse el atributo booleano disabled en el elemento. Cuando un fieldset es deshabilitado, todos sus hijos son deshabilitados también.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>Información para el envío</legend>
    <p>Nombre completo: <input type="text" name="nombrecompleto"></p>
    <p>Dirección: <input type="text" name="direccion"></p>
    <p>Teléfono: <input type="tel" name="telefono"></p>
  </fieldset>
  <fieldset disabled>
    <legend>Información de suscripción</legend>
    <p>Dirección e-mail: <input type="email" name="direccionemail"></p>
    <p><input type="checkbox" name="sescribirse"> Recibir e-mails con promociones y oportunidades.</p>
  </fieldset>
  <p><input type="submit" value="Enviar información"></p>
</form>
Información para el envío

Nombre completo:

Dirección:

Teléfono:

Información de suscripción

Dirección e-mail:

Recibir e-mails con promociones y oportunidades.

El elemento legend puede contener a otros elementos. Esto puede ser útil en ciertas situaciones como la que se muestra en el ejemplo a continuación. En éste, el elementos elemento legend posee, además del título para el conjunto de controles, una casilla de verificación que, mediante un programa del lado cliente, permite habilitar o deshabilitar al grupo completo de controles.

<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>
      <label>
        <input type="checkbox" name="suscripcion" checked onchange="alternarFieldset(this)"> Suscribirme al newsletter
      </label>
    </legend>
    <p>Correo electrónico: <input type="email" name="correoelectronico"></p>
  </fieldset>
  <p><input type="submit" value="Enviar información"></p>
</form>

Correo electrónico:

Atributos

Atributos específicos

disabled

Un valor booleano que indica si el grupo y sus controles se encuentran deshabilitados o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el grupo y sus controles estarán deshabilitados.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <fieldset disabled>
    <legend>Información básica</legend>
    <p>Apodo: <input type="text" name="apodo"></p>
    <p>Dirección de e-mail: <input type="email" name="direccionemail"></p>
  </fieldset>
  <p><input type="submit" value="Enviar información"></p>
</form>
Información básica

Apodo:

Dirección de e-mail:

form

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

La asociación de un fieldset con un formulario no implica que los controles dentro de éste serán asociados también. Los controles deben ser asociados independientemente.

Ejemplo

<fieldset form="formulario1">
  <legend>Información extra</legend>
  <p>Artista favorito: <input type="text" name="artistafavorito"></p>
  <p>Canción favorita: <input type="text" name="cancionfavorita"></p>
</fieldset>
<form id="formulario1" action="../../form-result.php" target="_blank">
  <p><input type="submit" value="Enviar información"></p>
</form>
Información extra

Artista favorito:

Canción favorita:

name

Un nombre para el fieldset que será usado en el envío del formulario y en programas del lado cliente.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <fieldset name="cardinfo">
    <legend>Información de la tarjeta</legend>
    <p>Número: <input type="text" name="numerotarjeta"></p>
    <p>Expira en: <input type="date" name="expiraen"></p>
    <p>Código de seguridad: <input type="number" name="codigoseguridad"></p>
  </fieldset>
  <p><input type="submit" value="Enviar información"></p>
</form>
Información de la tarjeta

Número:

Expira en:

Código de seguridad:

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.