Etiquetas FIELDSET y LEGEND de formularios

  • Por
Las etiquetas de HTML FIELDSET y LEGEND sirven para crear bloques de elementos dentro 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 su cierre 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).

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

vecas

05/10/2009
una critica
antes q nada estoy mas q satisfecho con este manual la verdad es q es muy didactico y de facil lectura pero este capitulo nose si lo escribio otra persona o se cansaron de enseñar pero esta demaciado incompleto y mal explicado, hasta ahora el resto era de 10..
desde ya muchas gracias

matías

23/5/2010
pregunta
Buenas, tengo una duda respecto a el atributo NAME. miren este ejmplo:

<form action=... enctype=... method=... name="MANUEL">
<label>
<input type=checkbox name="JORGE"> blablabla
</label>
</form>

Como se ve; el nombre del formulario (MANUEL) y el nombre del campo de texto checkbox (JORGE) son distintos. Su poniendo que el resultado es un ON, qué recibiría el correo o programa de destino??

recibiría JORGE=ON

o

recibiría MANUEL=ON ????

cuál de las dos?

enriquetico

17/10/2010
?????
no comprendi muy bien la funcionabilidad de <label>...</label>

Lancro

20/10/2010
Fieldset y legend para formularios nada mas?
Fieldset y legend no estan limitados a su uso en formularios, se pueden usar para agrupar texto igualmente, creo que esta en el capitulo equivocado...

Saludos.

midesweb

05/2/2011
Revisado!!
Hubo un problema con este artículo y el texto estaba extrayéndose de otro artículo del sitio web. He restaurado el texto correcto del artículo y con ello queda arreglado. Espero que ahora este artículo no produzca tanta confusión entre las personas que están estudiando HTML en DesarrolloWeb.com.

Simon

02/12/2011
"halla" disponible: "está" disponible // y no con y
Hola
En la página
http://www.desarrolloweb.com/articulos/etiquetas-fieldset-legend-formularios.html
dice (...)se haya disponible(...)
debe decir (...)halla(...)
Solo un minúsculo detalle que afea vuestro gran trabajo.
Saludos colaboradores, de Simón
PD: Gracias por vuestro ingente trabajo.

Carlos Salazar

20/2/2015
etiqueta fieldset
... Buenas tardes Miguel, estoy tratando de mejorar el aspecto de unos formularios y los estoy montando sobre bootstrap 3.2, al hacer uso de esta etiqueta, incluso pasando ejemplos, solo me aparece en el navegador una raya horizontal, encima el título que coloque, pero NO aparece el marco, que debo hacer?, aquí el código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>solo 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<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>
</form>

<link rel="stylesheet" href="js/jquery-1.11.2.min.js">
<link rel="stylesheet" href="js/bootstrap.min.js"></body>
</html>