Etiquetas fieldset y legend

La etiqueta fieldset se empieza con <fieldset> y se cierra </fieldset>.

Ejemplo:

Lo que conseguimos con la etiquetas fieldset es un rectángulo enmarcando el texto que esté incluido dentro de él.

Por defecto el ancho será del 100%. Si queremos darle una anchura predeterminada, lo que deberemos hacer es agregarle un código CSS.

Ejemplos:

<fieldset style="width:50%">Esta caja tiene un 50% de ancho.</fieldset>

<fieldset style="width:200px">Esta caja tiene un 200px de ancho.</fieldset>

La etiqueta legend se empieza con <legend> y se cierra </legend>.
Se pone dentro de la etiqueta fieldset, nos permite titular o etiquetar.

Ejemplos al 80%:

Titulo

<fieldset style="width:80%"><legend>Titulo</legend>Acá el contenido o texto.</fieldset>

Por defecto el titulo se mostrara del lado izquierdo. Si queremos mostrarlo al centro o a la derecha se debe utilizar el parámetro “align”.

Titulo

<fieldset style="width:80%"><legend align= "center">Titulo</legend>
Acá el contenido o texto.</fieldset>

Titulo

<fieldset style="width:80%"><legend align= "right">Titulo</legend>
Acá el contenido o texto.</fieldset>

Se puede personalizar agregandole códigos CSS como:

Titulo

<fieldset style="border: 3px dashed #000099;width:80%;background:#FF8000;color:#ffffff"><legend style="background:#C0C0C0;border: 1px solid #000099;color:#ff0000">Titulo</legend>
Acá el contenido o texto.
</fieldset>
Acá el contenido o texto.