HTML <legend>-Tag
The <legend> tag sets the caption for the group of form elements defined by the <field> tag. Description, attributes and using examples.
Das `<legend>`-Tag definiert die Beschriftung für eine Gruppe von Formularelementen, die in ein `<fieldset>`-Tag eingebettet sind. Im Browser wird das Fieldset visuell umrahmt, und die Legend-Beschriftung wird innerhalb dieses Rahmens gerendert. Es sollte in der Regel das erste Kindelement des `<fieldset>` sein. Die Gruppierung zusammengehöriger Steuerelemente mit `<fieldset>` und `<legend>`-Beschriftungen verbessert die Barrierefreiheit und Benutzerfreundlichkeit bei komplexen Formularen.
Syntax
Das `<legend>`-Tag wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden `<legend>`- und dem schließenden `</legend>`-Tag geschrieben.
Beispiel für das HTML `<legend>`-Tag:
HTML `<legend>`-Tag
<!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>Ergebnis
Beispiel für das HTML `<legend>`-Tag mit CSS:
Beispiel für das `<legend>`-Tag 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>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>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | left right center justify | Definiert die Ausrichtung der Beschriftung. In HTML5 veraltet; verwenden Sie stattdessen CSS text-align oder padding. |
Das `<legend>`-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
So gestalten Sie ein HTML `<legend>`-Tag
Sie können das `<legend>`-Element mit Standard-CSS-Eigenschaften wie padding, margin, background-color und font-weight gestalten, wie im vorherigen Beispiel gezeigt.
Praxis
Was ist die Hauptfunktion des HTML <legend>-Tags?