Detaillierte Erklärung zur Verwendung des Feldsatzes und der Legende für seltene Tags

Was <fieldset> und <legend> betrifft, werden die meisten Leute damit sicherlich nicht vertraut sein. Sie gehören zu den am wenigsten verwendeten HTML-Tags.

Ich habe diese beiden Tags zum ersten Mal kennengelernt, als ich in meinen frühen Jahren Reset.css oder Normalize.css lernte. Ich sah sie in dem CSS, das den Standardstil des vereinheitlichten Codes zurücksetzte. Ich bin kürzlich beim Studium von Grenzen auf diese beiden Tags gestoßen und fand sie sehr interessant. Deshalb habe ich einen Artikel geschrieben, um einige meiner Erkenntnisse mit Ihnen zu teilen.

Grundlegendes zu <fieldset> und <legend>

Im Allgemeinen werden <fieldset> und <legend> häufiger in Formularen verwendet.

• <fieldset> : Das HTML-Element <fieldset> wird verwendet, um Steuerelemente in einem Formular zu gruppieren.
• <legend> : Ein <legend> -Element wird in <fieldset> als Titel des Feldsets eingebaut.

Kurz gesagt: „fieldset“ kann allein zum Gruppieren von Formularelementen verwendet werden, während legend in Verbindung mit fieldset verwendet werden muss und paarweise als Titel der Gruppe erscheint.

Schauen wir uns ein einfaches Beispiel an. Das einfache HTML und die Struktur sind wie folgt:

<Feldsatz>
    <legend>Formular</legend>
    <div>
        <label>Name:</label><input type="text" placeholder="Eingabename" />
    </div>
    <div>
        <label>Passwort:</label><input type="text" placeholder="input Name" />
    </div>
</Feldsatz>

Feldsatz {
    Rand: 1px durchgezogen#ddd;
    Polsterung: 12px;
}
 
Legende
    Schriftgröße: 18px;
    Polsterung: 0 10px;
}

Die Wirkung ist wie folgt:

CodePen-Demo – Feldsatz- und Legenden-Demo

Interessant ist, dass, wenn für fieldset border festgelegt wird, der Inhalt legend als Titel der Gruppe in border eingebettet wird.

Steuern Sie die Position und den Stil legend

Position und Stil legend können gesteuert werden.

Die Position können wir über margin und padding des übergeordneten Elements steuern. Wenn das fieldset des übergeordneten Elements keine padding festlegt und legend keinen Rand festlegt, wird legend standardmäßig ganz links positioniert.

Feldsatz {
    Rand: 1px durchgezogen#ddd;
    // Polsterung: 12px;
}
 
Legende
    Schriftgröße: 18px;
}

Effektbild:

Durch Ändern margin legend oder padding-left des übergeordneten Elements können Sie die Anfangsposition des Titels steuern:

Feldsatz {
    Rand: 1px Rille #ddd;
}
 
Legende
    Animation: MarginMove 10 s unendlich abwechselnd;
}
 
@keyframes marginMove {
    100 % {
        Rand links: 100px;
    }
}

Effektbild:

Durch die Steuerung der padding der legend können Sie die Fläche der umgebenden Elemente vergrößern und mehr Leerraum lassen.

Anwendungsszenario - horizontale Linien auf beiden Seiten des Titels

Nachdem wir die oben genannten Grundkenntnisse verstanden haben, können wir beginnen, etwas tiefer zu gehen und über einige interessante Anwendungsszenarien der oben genannten <fieldset> und <legend> nachzudenken.

Ich denke, das am besten geeignete Szenario ist das Layout mit horizontalen Linien auf beiden Seiten des Titels. Etwa so:

Natürlich gibt es viele Möglichkeiten, dieses Layout zu lösen. Normalerweise werden Pseudoelemente verwendet, um horizontale Linien auf der linken und rechten Seite zu erzeugen, oder sie werden durch absolute Positionierung lokal abgedeckt und überlagert.

Dies geht hier ganz schnell mit <fieldset> und <legend> :

<div Klasse="g-container">
    <fieldset><legend>Rangliste</legend></fieldset>
</div>

Feldsatz {
    Breite: 300px;
    Höhe: 24px;
    Rand: 1px durchgehend transparent;
    Rahmenfarbe oben: #000;
}
 
Legende
    Rand: automatisch;
    Polsterung: 0 10px;
}

fieldset legt lediglich die obere Rahmenlinie fest, positioniert den Titel durch margin: auto in der Mitte und steuert den Leerraum auf beiden Seiten durch padding . Absolut perfekt.

CodePen-Demo – Feldsatz und Legende – Demo 2

Umrandung von verschachteltem Text

In diesem Artikel „So fügen Sie mithilfe grundlegender HTML-Elemente Text in Rahmen ein“ wird auch ein sehr interessantes Anwendungsszenario vorgestellt, nämlich das Einbetten von Text in Rahmen.

Stellen Sie sich vor, dass ein <fieldset> -Element in Kombination mit einem <legend> -Element den Effekt von in einen Rahmen eingebettetem Text erzeugen kann. Wenn Sie dann mehrere Gruppen kombinieren und positionieren, können Sie den Effekt von in einen mehrseitigen Rahmen eingebettetem Text erzeugen.

Der Pseudocode lautet wie folgt:

<div Klasse="g-container">
    <fieldset><legend>CSS-Feldsatz</legend></fieldset>
    <fieldset><legend>HTML-Element</legend></fieldset>
    <fieldset><legend>JavaScript</legend></fieldset>
    <fieldset><legend>TypoScript</legend></fieldset>
</div>

.g-container {
    Position: relativ;
    Breite: 300px;
    Höhe: 300px;
}
Feldsatz{
    Position: absolut;
    Breite: 300px;
    Höhe: 300px;
    Rand: 10px durchgehend transparent;
    Rahmenfarbe oben: #000;
}
Legende
    Polsterung: 0 10px;
}
 
Feldsatz:n-ter-Typ(2){ transform: drehen(90 Grad); }
Feldsatz:n-ter-Typ(3){ ​​transformieren: drehen(180 Grad); }
Feldsatz: n-ter-Typ (3)>Legende { transform: drehen (180 Grad); }
Feldsatz: n-ter Typ (4) { transform: drehen (-90 Grad); }

Das Wirkungsdiagramm sieht wie folgt aus:

Durch die Kombination mehrerer <fieldset> und <legend> können wir vier Seiten eines Containers erstellen, die einen sehr schönen Rahmen mit darin eingebettetem Text bilden.

Indem Sie legend animation hinzufügen, können Sie den Text bewegen

Legende
    Animation: 3 s unendliche lineare Abwechslungsbewegung;
}
@keyframes verschieben {
    100 % {
        Rand links: 70px;
    }
} 

CodePen-Demo – Rahmentextgestaltung mit HTML-Feldsatz und Legende

Okay, darauf basierend können wir verschiedene N-seitige Ränder mit eingebettetem Text erzeugen. Hier ist ein einfacher Versuch mit mehreren Polygonrändern.

CodePen-Demo – Feldsatz und Legende generieren Polygon

Dies ist das Ende dieses Artikels über die detaillierte Verwendung der ungewöhnlichen Tags „Fieldset“ und „Legend“. Weitere verwandte Inhalte zu „Fieldset“ und „Legend“-Tags finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!