Índice

Organización de los campos de formulario

En el caso de formularios largos y complejos, en ocasiones resulta útil agrupar gráficamente ciertos elementos para organizar la página de forma lógica. Las etiquetas <fieldset> y <legend> permiten mejorar sensiblemente la ergonomía y la usabilidad de los formularios.

La etiqueta <fieldset> ... </fieldset> engloba los campos de formulario que usted determine. Estos campos se muestran en la pantalla rodeados por un borde.

La etiqueta <legend> ... </legend>, situada justo después de la etiqueta <fieldset>, agrega una leyenda relacionada con aquellos campos que hayamos agrupado mediante la etiqueta <fieldset> (véase la siguiente captura de pantalla).

Ejemplo

Agrupemos los entrantes, las pizzas y los postres en una lista de selección múltiple:

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<form action=""> 
<fieldset> 
<legend>Nuestros entrantes</legend> 
<input type="checkbox" name="n1"> Chikenito’s<br> 
<input type="checkbox" name="n2"> Ensalada de temporada<br> 
<input type="checkbox" name="n3"> Buffalo wings<br> 
</fieldset> 
<fieldset> 
<legend>Nuestras ...