HTML <legend> Tag

Das <legend> Tag definiert die Beschriftung für eine Gruppe von Formularelementen, die in einem <fieldset>-Element eingeschlossen sind. Im Browser wird das Fieldset als umrahmte Box dargestellt, und die Legend-Beschriftung wird über dem oberen Rand dieses Rahmens gerendert. Das Gruppieren verwandter Steuerelemente innerhalb eines <form> mit <fieldset> und einer <legend> Beschriftung macht komplexe Formulare leichter erfassbar und wesentlich barrierefreier.

Diese Seite behandelt die korrekten Platzierungsregeln für <legend> , wie Hilfstechnologien es verwenden, wie man zugängliche Label-/Input-Paare einrichtet und wie man reale Fälle handhabt, beispielsweise ein Formular, das in mehrere Abschnitte aufgeteilt ist.

Warum `<legend>` das erste Kind von `<fieldset>` sein muss

Die HTML-Spezifikation verlangt, dass das <legend> das erste Kind seines <fieldset> ist. Dies ist nicht nur eine Stilkonvention:

Das Rendering hängt davon ab. Der Browser positioniert die Legend auf dem oberen Rand des Fieldset-Rahmens. Wenn die Legend nicht an erster Stelle steht, verliert sie diese besondere Platzierung und die Box wird falsch gerendert.
Der Accessibility-Baum hängt davon ab. Browser ordnen das erste <legend> dem zugänglichen Namen des Fieldsets zu. Eine Legend, die irgendwo anders platziert wird, wird als gewöhnlicher Inhalt behandelt und nicht als Gruppenbezeichnung angekündigt.

Ein <fieldset> darf nur eine <legend> enthalten, und sie muss vor allen Steuerelementen stehen. Wenn Sie eine zweite Beschriftung benötigen, brauchen Sie ein zweites <fieldset> .

Barrierefreiheit: Wie Screenreader die Legend verwenden

Die Kombination aus <fieldset> und <legend> ist der Standardweg, um eine Gruppe von Steuerelementen zu beschriften (das klassische Beispiel ist eine Gruppe von Radio-Buttons, die eine gemeinsame Frage teilen).

Wenn ein Screenreader den Fokus auf ein Steuerelement innerhalb des Fieldsets bewegt, kündigt er den Legend-Text als Präfix zum eigenen Label dieses Steuerelements an. Zum Beispiel liest der Screenreader bei einer Legend Lieferadresse und einem Feld mit der Bezeichnung Stadt ungefähr „Lieferadresse, Stadt, Eingabefeld." Das teilt dem Benutzer mit, zu welchem Abschnitt jedes Feld gehört, ohne dass er aus der Gruppe heraus navigieren muss. Einfacher Text wie Name:, der locker neben einem Input platziert wird, ist kein programmgesteuertes Label und bietet daher keinen solchen Kontext — koppeln Sie immer jedes Steuerelement mit einem echten <label>.

Syntax

Das <legend> Tag wird paarweise verwendet. Der Beschriftungstext wird zwischen das öffnende <legend> und das schließende </legend> Tag geschrieben, und es muss das erste Element innerhalb des <fieldset> sein.

Beispiel des HTML `<legend>` Tags:

Das folgende Beispiel zeigt barrierefreies Markup: Jedes Steuerelement hat eine id, und jedes <label> verweist darauf mit einem passenden for-Attribut. Ein Klick auf ein Label fokussiert das zugehörige Input, und Screenreader lesen die Legend zusammen mit dem Label vor.

HTML <legend> Tag

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

Probier es selbst »

Ergebnis

Beispiel des HTML `<legend>` Tags mit CSS:

Beispiel des <legend> Tags mit CSS-Eigenschaften:

<!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 for="name">Name:</label>
        <input type="text" id="name" name="name" />
        <br>
        <br>
        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email" />
        <br>
        <br>
        <label for="dob">Date of birth:</label>
        <input type="date" id="dob" name="dob" />
        <br>
        <br>
        <label for="pob">Place of birth:</label>
        <input type="text" id="pob" name="pob" />
      </fieldset>
    </form>
  </body>
</html>

Probier es selbst »

Beispiel mit mehreren Fieldsets und Legends:

Echte Formulare sind in der Regel in mehrere Gruppen aufgeteilt — zum Beispiel ein Checkout-Formular mit separaten Abschnitten für Lieferung und Rechnungsstellung. Jede Gruppe erhält ihr eigenes <fieldset> und ihre eigene <legend> . Ein Screenreader stellt dann jedem Feld den richtigen Abschnittsnamen voran, sodass der Benutzer immer weiß, ob er die Liefer- oder die Rechnungsadresse bearbeitet.

Formular mit Liefer- und Rechnungsgruppen

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Shipping address</legend>
        <label for="ship-name">Full name:</label>
        <input type="text" id="ship-name" name="ship-name" />
        <br>
        <br>
        <label for="ship-city">City:</label>
        <input type="text" id="ship-city" name="ship-city" />
      </fieldset>
      <fieldset>
        <legend>Billing address</legend>
        <label for="bill-name">Full name:</label>
        <input type="text" id="bill-name" name="bill-name" />
        <br>
        <br>
        <label for="bill-city">City:</label>
        <input type="text" id="bill-city" name="bill-city" />
      </fieldset>
    </form>
  </body>
</html>

Ein Fieldset und eine Legend sind auch der empfohlene Weg, um eine Gruppe von Radio-Buttons zu beschriften, wobei die Legend die Frage stellt und jeder Radio-Button sein eigenes Label hat:

<form>
  <fieldset>
    <legend>Choose a shipping speed</legend>
    <label for="standard">Standard (5–7 days)</label>
    <input type="radio" id="standard" name="speed" value="standard" />
    <br>
    <label for="express">Express (1–2 days)</label>
    <input type="radio" id="express" name="speed" value="express" />
  </fieldset>
</form>

Attribute

Attribut	Wert	Beschreibung
align	left right center justify	Definierte die horizontale Ausrichtung der Beschriftung gegenüber dem Fieldset. Veraltet — aus HTML5 entfernt; verwenden Sie stattdessen CSS.

Das <legend> Tag unterstützt die Global Attributes und die Event Attributes.

Ersetzen des veralteten `align`-Attributs

Das alte align="center"-Attribut funktioniert nicht mehr zuverlässig und sollte nicht verwendet werden. Das CSS-Äquivalent ist text-align auf dem <legend> Element selbst:

/* Old, deprecated: <legend align="center"> */
/* Modern replacement: */
legend {
  text-align: center;
}

Wichtige Hinweise zur Positionierung:

Standardmäßig liegt die Legend über dem oberen Rand des Fieldsets, nahe der linken Kante. Browser reservieren der Legend eine besondere Position im Layout, sodass sie sich nicht wie eine normale Block-Ebene-Box verhält.
text-align verschiebt die Beschriftung horizontal innerhalb des vom Browser zugewiesenen Raums — die Ergebnisse variieren zwischen Browsern, also testen Sie Ihre Zielbrowser.
Für präzise Kontrolle können Sie die Standardplatzierung mit position und Offsets überschreiben oder padding / margin verwenden, um den Text zu verschieben. Durch Setzen von width auf der Legend können Sie sie so ausrichten, wie es align="justify" einst implizierte.

So gestalten Sie ein HTML `<legend>` Tag

Sie können das <legend> Element mit Standard-CSS-Eigenschaften wie padding, margin, background-color, text-align und font-weight gestalten, wie im CSS-Beispiel oben gezeigt.

Übungen

Übung

Was ist die Hauptfunktion des HTML <legend> Tags?

Es wird verwendet, um ein Eingabefeld in einem Formular zu erstellen.Es stellt eine Beschriftung für das <fieldset>-Element bereit.Es stellt eine Beschriftung für das <table>-Element bereit.Es wird verwendet, um verwandte Elemente in einem Formular zu gruppieren.

Warum <legend> das erste Kind von <fieldset> sein muss