Fieldset y legend

Fieldset HTML

La etiqueta “fieldset” suele usarse principalmente en formularios para poder agrupar campos que están relacionados entre sí. Aunque también podemos utilizarlo para agrupar una serie de definiciones o de textos relacionados entre sí.

Fieldset se escribe con la etiqueta <fieldset> y su cierre (</fieldset>). Debemos advertir que tanto la etiqueta de apertura como la de cierre son obligatorias. El efecto que conseguimos gracias a la etiquetas fieldset es un rectángulo enmarcando el texto que esté incluido dentro de él.

Hay una cosa importante que debemos tener en cuenta del fieldset en HTML: Éste se ensanchará todo lo que pueda en la página. Es decir, su ancho por naturaleza será del 100%. Si queremos darle una anchura predeterminada o limitar su expansión lo que deberemos hacer incluir la etiqueta dentro de una tabla a la que sí le indicaremos la anchura que queremos darle.

A continuación vamos a ofrecerte un fieldset básico, sin limitación ninguna:

<fieldset>

Esto es un fieldset básico

</fieldset>

Y aquí puedes apreciar como quedará en nuestra página:

Y a continuación te mostramos el código de un fieldset incluido dentro de una tabla, con una anchura del 75% y alineada al centro:

<table width="75%" align="center" border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<fieldset>

Esto es un fieldset dentro de una tabla

</fieldset>

</td>

</tr>

</table>

Obteniendo el siguiente resultado:

Legend HTML

La etiqueta “legend” nos resulta muy útil dentro de la etiqueta fieldset HTML. Legend nos permite titular o etiquetar el conjunto de campos que están incluidos dentro de legend. Por ejemplo, si el conjunto de datos son los datos personales de la persona, en legend escribiremos “Datos personales”.

Legend se abre con la etiqueta <legend> y se cierra con </legend>. Por supuesto, estas dos etiquetas deben estar dentro de la etiqueta <fieldset>.

Podemos alinear el título del legend HTML como queramos, mediante el parámetro “align”. En la siguiente muestra veremos un fieldset con su etiqueta alineada al centro:

<fieldset>

<legend align= "center">legend alineado al centro</legend>

Este es un ejemplo de un “fieldset” con el legend alineado al centro

</fieldset>

Y la muestra es la siguiente: