La etiqueta <legend> representa un título para un elemento <fieldset>.

El elemento <legend> puede hacer que tus formularios y otros elementos sean más fáciles de entender para tus usuarios, ya que les permite ver para qué sirve el grupo de elementos.

Por ejemplo, un elemento <legend> podría proporcionar a un elemento <fieldset> un título que diga “Detalles del nombre” y otro podría decir “Detalles de la dirección“.

Sintaxis

La etiqueta <legend> se escribe como <legend></legend> con el título insertado entre las etiquetas de inicio y fin.

Como esto:

HTML
<fieldset>
    <legend>Título aquí...</legend>

    ...contenido del fieldset...

</fieldset>

Ejemplos

Uso básico de la etiqueta

Aquí tienes un ejemplo básico para mostrar cómo se puede utilizar la etiqueta <legend>.

HTML
<fieldset>
<legend>Detalles del nombre</legend>
<p>Nombre: <input type="text" style="width:120px;"> Apellido: <input type="text" style="width:120px;"></p>
<p>Nombre preferido: <input type="text" style="width:120px;"></p>
</fieldset>
<fieldset>
<legend>Género</legend>
<input type="radio" name="gender" value="male"> Masculino
<input type="radio" name="gender" value="female"> Femenino
<input type="radio" name="gender" value="other"> Otro
</fieldset>

See the Pen Ejemplo_LEGEND by Alex (@htmldesdecero) on CodePen.

Añadir estilos

En este ejemplo, añadimos algunos estilos a los elementos <legend> y <fieldset>.

HTML
<!DOCTYPE html>
<title>Ejemplo</title>
<style>
fieldset {background:#D0FADA;border:1px dotted #0C972C;}
legend {font-weight:bold;font-size:larger;}
</style>
<fieldset>
<legend>Detalles del nombre</legend>
<p>Nombre: <input type="text" style="width:120px;"> Apellido: <input type="text" style="width:120px;"></p>
<p>Nombre preferido: <input type="text" style="width:120px;"></p>
</fieldset>
<fieldset>
<legend>Género</legend>
<input type="radio" name="gender" value="male"> Masculino
<input type="radio" name="gender" value="female"> Femenino
<input type="radio" name="gender" value="other"> Otro
</fieldset>

See the Pen Ejemplo_LEGEND_2 by Alex (@htmldesdecero) on CodePen.

Atributos

Se pueden añadir atributos a un elemento HTML para proporcionar más información sobre cómo debe aparecer o comportarse el elemento.

El elemento <legend> acepta los siguientes atributos:

AtributoDescripción
ninguno

Atributos globales

Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes utilizar estos atributos con la etiqueta <legend>, así como con todas las demás etiquetas HTML.

  • accesskey
  • autocapitalize
  • class
  • contenteditable
  • data-*
  • dir
  • draggable
  • hidden
  • id
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • part
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate

Para obtener una explicación completa de estos atributos, consulta Atributos globales HTML 5.

Controladores de eventos

Los atributos de contenido del controlador de eventos te permiten invocar un script desde dentro de tu HTML. El script se invoca cuando se produce un determinado “evento”. Cada atributo de contenido del controlador de eventos se ocupa de un evento diferente.

  • onabort
  • onauxclick
  • onblur
  • oncancel
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • onclose
  • oncontextmenu
  • oncopy
  • oncuechange
  • oncut
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformdata
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onlanguagechange
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onpaste
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreset
  • onresize
  • onscroll
  • onsecuritypolicyviolation
  • onseeked
  • onseeking
  • onselect
  • onslotchange
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • ontoggle
  • onvolumechange
  • onwaiting
  • onwheel

La mayoría de los atributos de contenido del controlador de eventos se pueden utilizar en todos los elementos HTML, pero algunos controladores de eventos tienen reglas específicas sobre cuándo se pueden utilizar y a qué elementos se aplican.

5/5 - (1 voto)