Etiquetas FIELDSET y LEGEND de formularios

En el Manual de HTML de DesarrolloWeb.com ya hemos visto varios artículos para la creación de formularios en HTML. Pero nos quedaba por ver un par de etiquetas, que no siendo imprescindibles para la realización de formularios, sí nos pueden ayudar a estructurarlos, mejorando la interfaz de usuario de nuestras páginas.

Los atributos FIELDSET y LEGEND se utilizan en conjunto y sirven respectivamente para definir y etiquetar grupos lógicos de elementos de formularios. Realmente no afectan a la operativa del formulario, pero sirven para agrupar elementos en diferentes áreas, de modo que se clarifique la entrada de datos del usuario. Al formar varios grupos de elementos se puede crear una estructura mucho más fácil de asimilar por el usuario, sobre todo si se trata de formularios que tengan muchos elementos.

Etiqueta FIELDSET

La etiqueta FIELDSET sirve para agrupar los elementos. Se utiliza con su respectiva etiqueta de cierre y lo que hace es crear un recuadro que rodea a los elementos de formulario colocados dentro de ella.

Por ejemplo, se podría usar de esta manera:

<fieldset>
Elemento de formulario: <input type="text" name="elemento1">
<br>
Otro elemento: <input type="text" name="otro">
</fieldset>

Simplemente creará un cuadrado que agrupará los dos elementos del formulario incluidos dentro del FIELDSET. Podemos ver el resultado en una página aparte.

Etiqueta LEGEND

LEGEND sirve para nombrar o etiquetar un grupo creado con FIELDSET. Añade simplemente una nota aclaratoria sobre qué tipo de información se está agrupando en el recuadro. Tampoco sirve para nada en especial, de no ser porque queda bonita y porque puede servir para ayudar al usuario y mejorar la interfaz y la claridad de los formularios.

La etiqueta LEGEND se coloca después de la etiqueta FIELDSET. Tiene su propia etiqueta de cierre. Entre <LEGEND> y </LEGEND> colocamos el texto con el que queremos marcar el recuadro definido con FIELDSET.

A la etiqueta LEGEND se le puede poner el atributo align para indicar el lugar donde debe aparecer la leyenda. Por ejemplo podríamos indicar align=”right” para que apareciera en la parte de la derecha, en lugar de la izquierda, que es donde aparece por defecto.

Veamos ahora un ejemplo sencillo de utilización de las etiquetas FIELDSET y LEGEND en conjunto.

<form>
<fieldset>
<legend align="right">Datos personales</legend>
Nombre: <input type="text" name="nombre">
<br>
Edad: <input type="text" name="edad" size="2">
<br>
Dirección: <input type="text" name="direccion">
</fieldset>
<br>
<fieldset>
<legend align="right">Datos de tu ordenador</legend>
Modelo de ordenador: <input type="text" name="modelo">
<br>
Sistema que te da el problema:
<select>
<option value=cpu>CPU
<option value=impresora>Impresora
</select>
</fieldset>
<br>
<fieldset>
<legend align="right">Descripción del problema</legend>
<textarea cols="55" rows="8" name="descripcion"></textarea>
</fieldset>
</form>

El ejemplo en marcha tendría este aspecto.

Podremos comprobar como aparecen tres bloques en el formulario, producidos por tres etiquetas FIELDSET, con varios campos de formulario incluidos en cada una. Además, cada uno de los FIELDSET tienen dentro un LEGEND que sirve para nombrar con una leyenda cada uno de los tres bloques.

Etiqueta LABEL

Aunque no forma parte del objetivo de este artículo, queremos nombrar también otra etiqueta llamada LABEL que sí tiene una utilidad especial en la creación de formularios, además de la estética. Sirve para poner texto al lado de los elementos de formulario y que tal texto esté asociado al propio elemento. Ese texto, que pondremos con el tag LABEL, se asocia a un elemento concreto con el atributo FOR, colocando como valor del atributo el identificador del campo que se está asociando.

<label for="edad">Edad</label> <input type="text" name="edad" id="edad">

Como vemos, hemos creado un LABEL y hemos colocado en el atributo FOR el nombre del campo de formulario que estamos asociando a ese texto. El resultado es que el texto colocado dentro de LABEL es un elemento interactivo, al que podemos hacer clic y sería como si hiciésemos clic en el propio campo asociado al LABEL.

Para acabar, comentamos que estas etiquetas se hallan relatadas en otro artículo de DesarrolloWeb.com, con explicaciones escritas por otro autor, que podrían complementar y ampliar la presente información. Si te interesa, accede al artículo Las nuevas etiquetas de HTML 4.0 (2).