Etiqueta HTML `<legend>`

La etiqueta <code><legend></code> define la leyenda para un grupo de elementos de formulario envueltos en una etiqueta <code><fieldset></code>. En el navegador, el fieldset se enmarca visualmente y la leyenda del legend se renderiza dentro de ese marco. Por lo general, debe ser el primer elemento hijo de <code><fieldset></code>. Agrupar controles de formulario relacionados con <code><fieldset></code> y leyendas <code><legend></code> mejora la accesibilidad y la usabilidad en formularios complejos.

Sintaxis

La etiqueta <code><legend></code> se usa en pares. El contenido se escribe entre las etiquetas de apertura <code><legend></code> y cierre <code></legend></code>.

Ejemplo de la etiqueta HTML `<code><legend></code>`:

Etiqueta HTML <code><legend></code>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Personal data:</legend>
        Name:
        <input type="text" />
        <br>
        <br> E-mail:
        <input type="email" />
        <br>
        <br> Date of birth:
        <input type="number" />
        <br>
        <br> Place of birth:
        <input type="text" />
      </fieldset>
    </form>
  </body>
</html>

Try it Yourself »

Resultado

ejemplo de la etiqueta legend

Ejemplo de la etiqueta HTML `<code><legend></code>` con CSS:

Ejemplo de la etiqueta <code><legend></code> con propiedades CSS:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      form {
        width: 55%;
      }
      fieldset {
        padding: 25px;
      }
      label {
        display: inline-block;
        width: 95px;
        text-align: right;
      }
      legend {
        display: block;
        padding: 15px;
        margin-bottom: 10px;
        background-color: #cccccc;
        color: #777777;
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Personal data:</legend>
        <label>Name:</label>
        <input type="text" />
        <br>
        <br>
        <label>E-mail:</label>
        <input type="email" />
        <br>
        <br>
        <label>Date of birth:</label>
        <input type="number" />
        <br>
        <br>
        <label>Place of birth:</label>
        <input type="text" />
      </fieldset>
    </form>
  </body>
</html>

Try it Yourself »

Atributos

Atributo	Valor	Descripción
align	left right center justify	Define la alineación de la leyenda. Obsoleto en HTML5; use CSS `text-align` o `padding` en su lugar.

La etiqueta <code><legend></code> admite los Atributos Globales y los Atributos de Eventos.

Cómo dar estilo a una etiqueta HTML <code><legend></code>

Puede dar estilo al elemento <code><legend></code> utilizando propiedades CSS estándar como padding, margin, background-color y font-weight, como se demostró en el ejemplo anterior.

Práctica

¿Cuál es la función principal de la etiqueta HTML <legend>?

Se utiliza para crear un campo de entrada en un formulario.Proporciona una leyenda para el elemento <fieldset>.Proporciona una leyenda para el elemento <table>.Se utiliza para agrupar elementos relacionados en un formulario.

Etiqueta HTML <legend> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <code><legend></code>: ​

Resultado ​

Ejemplo de la etiqueta HTML <code><legend></code> con CSS: ​

Atributos ​