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.
Tabla de contenidos
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.
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>
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.
<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>
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>
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>
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>
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>
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.