HTML <legend>-Tag
Das <code><legend></code>-Tag definiert die Beschriftung für eine Gruppe von Formularelementen, die in ein <code><fieldset></code>-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 <code><fieldset></code> sein. Die Gruppierung zusammengehöriger Steuerelemente mit <code><fieldset></code> und <code><legend></code>-Beschriftungen verbessert die Barrierefreiheit und Benutzerfreundlichkeit bei komplexen Formularen.
Syntax
Das <code><legend></code>-Tag wird in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden <code><legend></code>- und dem schließenden <code></legend></code>-Tag geschrieben.
Beispiel für das HTML <code><legend></code>-Tag:
HTML <code><legend></code>-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 <code><legend></code>-Tag mit CSS:
Beispiel für das <code><legend></code>-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 <code><legend></code>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
So gestalten Sie ein HTML <code><legend></code>-Tag
Sie können das <code><legend></code>-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?