Unidad 8. Formularios (XVII)

8.29. Etiquetas <fieldset> y <legend>

La etiqueta fieldset permite agrupar etiquetas input para mejorar su visualización. La etiqueta legend muestra un texto a modo de título. Ambas etiquetas se suelen utilizar conjuntamente, aunque no es obligatorio. Por defecto, los navegadores muestran un marco alrededor del grupo y el texto de legend como encabezado.

Entre el inicio de etiqueta <fieldset> y el fin de etiqueta </fielset> podemos incluir las etiquetas input que queramos (también etiquetas label). Entre el inicio de etiqueta <legend> y el fin de etiqueta </legend> escribimos el texto del título. Por ejemplo, este código:

<fieldset>
  <legend>Datos personales</legend>
  <label>Nombre: <input type="text" name="nom" /><label><br>
  <label>Apellidos: <input type="text" name="ape" /><label><br>
</fieldset>
<br>
<fieldset>
  <legend>Datos del domicilo</legend>
  <label>Calle: <input type="text" name="calle" /><label><br>
  <label>Población: <input type="text" name="pobla" /><label><br>
  <label>Provincia: <input type="text" name="prov" /><label><br>
</fieldset><br>

Produce este resultado:

Como siempre podemos utilizar hojas de estilo CSS para personalizar el aspecto de las etiquetas fieldset y legend. Por ejemplo, para fieldset hemos dado este estilo

background-color: #f4f1ed ;
color: firebrick;
border-color: darkgoldenrod;
border: 9px groove (internal value);
border-radius: 7px;
width: 400px

Y para legend:

color: darkblue;
font-weight: bold

También hemos dado un margin-bottom: 5px para las etiquetas input

 

Produce este resultado: